该用 <section> 而不是 <div> 时，需满足：内容有标题且主题独立；无标题则禁用；常见错误是将纯布局容器（如轮播图、卡片列表）误标为 <section>。
什么时候该用 <section> 而不是 <div>
语义化不是贴标签比赛，<section> 有明确含义：它表示文档中一个有标题的、主题独立的内容区块。没标题？别硬套。
- 常见错误：把轮播图容器、卡片列表、侧边栏直接包成
<section>—— 它们通常只是布局容器，没有自身标题和完整语义 - 正确场景：一篇博客里的「背景介绍」「实验方法」「结果分析」这些带
<h2>或更高阶标题的块 - 注意：浏览器和读屏器会把
<section>当作导航单元，滥用会导致信息结构混乱，反而降低可访问性
<article> 和 <section> 的核心区别在哪
关键看内容是否「可独立分发或复用」。<article> 是自包含的，比如一条新闻、一篇微博、一个评论；<section> 是文档内部的逻辑分段，不能脱离上下文存在。
- 错误现象：把首页的「最新动态」栏目整个写成
<article>—— 那是容器，里面每条才是<article> - 参数差异：无，但嵌套关系重要——
<article>内可以有多个<section>，反之不行 - 性能影响几乎为零，但 SSR 渲染或 SEO 提取时，搜索引擎更倾向信任
<article>内的<h1>作为主标题
哪些标签看似语义化，实际等于 <div>
<span>、<em>、<i>、<b> 这些行内元素，除非你真在表达强调、术语、语气或关键词，否则和 <span> 没本质区别。
- 常见踩坑：
<i class="icon-user"></i>用<i>仅为了图标 —— 它本意是「以不同语气呈现的文本」，纯装饰图标应改用<span>或<svg> - 兼容性提示：旧版 IE 对
<main>、<aside>支持弱，需配 ARIA role（如role="main"），但现代项目基本不用操心 -
<footer>不一定在页面底部——它属于其最近的<article>或<body>级别，文章末尾的作者信息就是合法<footer>
隐藏语义技巧：不靠标签，靠 aria- 属性补位
有些结构无法用原生语义标签准确表达，比如一个手风琴折叠面板、一个带搜索的下拉选择器。这时候别硬凑 <details> 或 <select>，直接用 role + aria- 补足。
立即学习“前端免费学习笔记（深入）”；
- 典型错误：用
<div onclick="toggle()">做菜单，却不加role="menu"、aria-expanded、aria-haspopup - 必须配对的属性：
aria-expanded要和真实展开状态同步更新，否则读屏器会误报 - 不要滥用
aria-label：已有可见文本时，优先用aria-labelledby关联，避免读屏器重复播报
<article> 里没标题，或 <section> 套着另一个没标题的 <section>。机器不靠直觉理解结构，只认规则。 
