该用 当内容可独立分发或复用（如博客、新闻稿），用 仅作页面内逻辑分组（如“产品特性”）； 是区块介绍容器， 专指含至少两个跳转链接的导航集合； 唯一且不可嵌套于其他语义元素内； 表示相关但非必需的补充内容，不限于侧边栏。
什么时候该用 <article></article> 而不是 <section></section>
核心区别在于内容是否「可独立分发或复用」。<article></article> 适用于博客正文、新闻稿、用户评论这类能脱离当前页面被 RSS 抓取、单独存档、或嵌入其他站点的内容；<section></section> 更偏向逻辑分组，比如「产品特性」「客户评价」「技术参数」这些只是页面内的一块结构，不具独立语义。
常见错误是把所有带标题的区块都套 <article></article>——比如首页的「关于我们」「服务流程」用 <section></section> 更准确。若一个 <section></section> 内包含多个独立文章（如「最新三篇博客」），才在外层用 <section></section>，内部每个用 <article></article>。
- 独立内容（可被转发、订阅）→
<article></article> - 同一主题下的子模块（如「课程大纲」含「基础」「进阶」「实战」三节）→
<section></section> -
<article></article>可以嵌套<section></section>，但反向不推荐
<header></header> 和 <nav></nav> 的边界在哪
<header></header> 是内容区块的「介绍性容器」，不一定是页面顶部；它可以出现在 <article></article> 或 <section></section> 内部，放该区块的标题、作者、时间等元信息。<nav></nav> 则专指「导航链接集合」，必须包含至少两个有跳转意义的链接（单个「返回首页」按钮不算）。
典型误用：把整个页眉（logo + 搜索框 + 用户头像）全塞进 <nav></nav>。正确做法是 <header></header> 包住全部，其中导航部分再用 <nav></nav> 单独包裹 <ul></ul> 或 <ol></ol> 链接列表。
- 仅含 logo / 标题 / 副标题 → 用
<header></header>，不用<nav></nav> - 含「首页」「产品」「文档」「联系」等跳转链接 → 必须用
<nav></nav> -
<nav></nav>不必在<header></header>内；侧边栏导航、页脚导航同样适用
<main></main> 的隐藏约束：为什么不能嵌套
<main></main> 表示文档中与当前页面「最相关」的唯一主体内容，浏览器和屏幕阅读器会据此跳过装饰性区域直达核心。W3C 明确规定它不能出现在 <article></article>、<aside></aside>、<footer></footer>、<header></header>、<nav></nav> 内部——因为这些元素本身已有明确语义边界，再套 <main></main> 会造成语义冲突。
另一个易忽略点：<main></main> 在整个文档中只能出现一次，且不应包含网站通用的页眉页脚、侧边栏广告等内容。如果用了 JavaScript 动态切换主内容区（如 SPA），每次更新后需确保 <main></main> 的 aria-live 属性配合状态提示，否则屏幕阅读器可能无法感知变化。
- SPA 页面切换时，
<main></main>的id或class不应被销毁重建，避免焦点丢失 - 服务端渲染页面中，
<main></main>应直接包裹核心内容，不要留空或仅放 loading 占位符 - 搜索引擎会赋予
<main></main>内容更高权重，但不会因此提升 SEO——前提是结构真实合理
<aside></aside> 不只是「侧边栏」
<aside></aside> 的本质是「与当前上下文相关但非必需」的内容，比如文章里的术语解释框、引用来源说明、作者简介卡片；它甚至可以出现在段落中间（用 <aside></aside> 包裹一个 <blockquote></blockquote>）。把它等同于「右侧固定栏」是最大误区——CSS 布局决定位置，语义决定用途。
当内容与主文强耦合（如教程中的代码注释、步骤说明图）时，优先用 <figure></figure> + <figcaption></figcaption>；只有当信息属于补充性、可移除而不影响主逻辑时，才用 <aside></aside>。
- 博客文章末尾的「推荐阅读」列表 →
<aside></aside> - 技术文档中穿插的「兼容性提示」气泡 →
<aside></aside> - 电商商品页的「买家秀轮播」→ 用
<section></section>，因它是主内容的延伸而非补充
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
