HTML语义标签错误会导致无障碍失效和SEO降权；<section>需同时满足有主题和标题；<aside>用于补充信息，<nav>专用于导航；<article>必须可独立分发；<main>必须且只能出现一次。
<main> 必须且只能用一次，<section> 不是“画盒子”的万能标签，<aside> 不能塞导航菜单——选错语义标签不是样式问题，是结构错误，会直接让屏幕阅读器跳过内容、搜索引擎降权、无障碍测试工具报错。
什么时候该用 <section> 而不是 <div>
<section> 的核心条件就两个：有明确主题 + 有标题（<h2>–<h6>）。它不是视觉分组工具，而是逻辑分组容器。
- 适合：
<section><h2>产品特性</h2><p>支持离线同步...</p></section>—— 可独立理解、带主题、有标题 - 不适合：
<section><button>提交</button><button>重置</button></section>—— 没主题、没标题，纯操作按钮组，用<div>更准确 - 特别注意：
<section>嵌套在<article>里时，子<section>的标题层级必须连续（比如<article>用<h2>，里面第一个<section>就该用<h3>）
<aside> 和 <nav> 容易混淆的边界
<aside> 是“与当前上下文相关但非必需”的补充信息；<nav> 是“用于导航的链接集合”。两者语义完全不同，混用会导致键盘用户无法正确聚焦导航区域。
-
<aside>合理场景：文章右侧的“作者简介”、博客文末的“相关推荐”、图文旁的术语解释框 -
<nav>合理场景：顶部主导航栏、页脚的“友情链接”、面包屑（<nav aria-label="Breadcrumb">） - 常见错误：
<aside><ul><li><a href="/about">关于</a></li></ul></aside>—— 这是导航，不是补充信息，必须改用<nav>
<article> 不等于“一篇文章”，而是一个可独立分发的内容单元
<article> 的关键判断标准是：把它单独拎出来，是否仍能被理解、被引用、被 RSS 抓取？如果不能，大概率不该用它。
立即学习“前端免费学习笔记（深入）”；
- 适合：
<article><header><h2>React 19 新特性详解</h2><time datetime="2026-08-20">2026年8月20日</time></header><p>Server Components...</p></article> - 不适合：
<article><h3>用户评论</h3><p>这个真不错！</p></article>—— 评论本身依附于主文章，不可独立分发，应放在<section>或直接用<div> - 嵌套规则：
<article>内部可以再嵌套<article>（如博客的“主文章 + 评论”），但每个都必须满足独立分发条件
<main> 的唯一性不是建议，是强制规范
多个 <main> 会破坏文档大纲，部分旧版屏幕阅读器可能只朗读第一个，其余被忽略。现代浏览器虽能容错，但 axe、WAVE 等工具会直接标为“严重无障碍缺陷”。
- 正确：
<body><header>...</header><main>核心内容</main><footer>...</footer></body> - 错误：
<main>首页内容</main><main>侧边广告区</main>—— 广告区该用<aside>，不是<main> - 陷阱：
<div class="main-wrapper"><main>...</main></div>—— 外层<div>无语义，反而干扰辅助技术识别，应直接给<main>加 class 控制样式
最常被忽略的是标题层级断层和 <main> 嵌套：哪怕结构看起来“能跑”，只要大纲解析失败，对屏幕阅读器用户就是不可用的。语义不是锦上添花，是页面能被正确读取的前提。
