该用而非当内容可独立复用，如博客单篇、新闻条目；仅用于主题分组且需标题；专指主要导航；唯一且不可嵌套于其他语义标签内；表附属关联内容，与视觉位置无关。
什么时候该用 <article></article> 而不是 <section></section>
关键区别不在视觉，而在内容是否「可独立复用」。<article></article> 表示一段完整、自包含、能脱离当前页面被单独分发或聚合的内容（比如 RSS 订阅里的单条博客、新闻客户端里的一则消息）；<section></section> 只是主题性分组，比如「产品特性」「用户评价」这类有标题但不独立存在的区块。
常见错误：把首页的「关于我们」「服务介绍」几个模块全套 <article></article> —— 它们依赖上下文存在，没有独立语义价值，应改用 <section></section>。
-
<article></article>内部可嵌套<header></header>/<footer></footer>（如作者、发布时间） -
<section></section>必须带<h1></h1>–<h6></h6>标题，否则语义失效 - 多个
<article></article>套在同一个<main></main>里很自然；多个<section></section>套在<article></article>里也合理（如文章分章节）
<nav></nav> 不是所有链接集合都适用
<nav></nav> 的语义重点是「主要导航」—— 用户靠它快速跳转到站点不同区域。侧边栏的「相关文章」、页脚的「友情链接」、评论区的「回复按钮」都不算。
容易踩的坑：给轮播图下方的「上一张/下一张」按钮加 <nav></nav>，或者把搜索结果页的分页控件整个包进 <nav></nav>。这些属于功能控件，不是导航结构。
- 真正该用
<nav></nav>的：主导航栏、面包屑、站内目录树、多级侧边菜单 - 辅助性链接组建议用
<div role="navigation"> 或直接保持语义中立（如普通 <code><ul></ul>） - 一个页面可以有多个
<nav></nav>，但每个都得承担明确的导航职责 -
<main></main>应直接位于下，或紧贴在<header></header>后 - 它里面可以包含多个
<article></article>（如列表页），也可以只有一段<p></p>（如单页说明） - 如果页面是纯工具类（如计算器），
<main></main>就包裹那个交互区域，而不是空着不用 - 适合
<aside></aside>的：作者简介、参考资料链接、广告、侧边注释、相关推荐 - 不适合的：主导航、页脚版权栏、文章标题栏
- 如果某块内容移除后，主内容逻辑断裂（比如去掉「章节概要」导致正文看不懂），那它就不该是
<aside></aside>
<main></main> 的唯一性与嵌套陷阱
<main></main> 在整个文档中只能出现一次，且不能是 <article></article>、<aside></aside>、<header></header>、<footer></footer>、<nav></nav> 的子元素 —— 它代表的是页面最核心、不可替代的内容主体。
典型误用：在某个 <article></article> 内部再放一个 <main></main>，或者把页头广告位和正文一起塞进 <main></main>。
<aside></aside> 和视觉位置无关
<aside></aside> 的语义是「与主内容关联但非必需」，不是「放在右边的盒子」。它可以出现在 DOM 任意位置，甚至放在 <article></article> 开头（比如术语解释框），只要逻辑上它是附属的。
很多人按 CSS 布局反推语义：看到浮动在右侧就套 <aside></aside>，结果把主菜单栏也标成 <aside></aside> —— 这直接破坏了导航可访问性。
语义化最难的部分不是记住标签名，而是持续判断「这段内容对用户理解整页信息是否必要」。一旦开始按这个标准去审视每个容器，<div> 就会自然退场。 </div>
