main 必须唯一且为 body 直接子元素，嵌套会破坏语义层级；article 用于可独立传播的内容，section 用于依赖上下文的模块；nav 仅限主要导航，header/footer 需匹配作用域。
main 必须唯一且不能嵌套，article 和 section 不是同义词，nav 不是用来包所有链接的——用错标签不会让页面“跑不起来”，但会让 SEO、屏幕阅读器和后续维护直接掉坑里。
为什么 main 不能套在 div 里或嵌套在 article 中
浏览器不报错，但语义层级就断了。屏幕阅读器会把嵌套里的内容当成“非主内容”跳过，搜索引擎也可能降权主体区块。
-
main是整页唯一、不可替代的核心内容容器，只能作为body的直接子元素 - 常见错误：
<div class="wrapper"><main>...</main></div>—— 这个div破坏了main的语义直达性 - 正确写法：
<body><header>...</header><main>...</main><footer>...</footer></body> - 如果页面有多个文章卡片，每个卡片用
article，但整个列表区域仍应由一个外层main包裹
article 和 section 怎么选：删掉周围还能不能自己活
不是看“有没有标题”，而是看这块内容脱离上下文后是否仍有完整意义和传播价值。
-
article：RSS 条目、微博单条、电商商品卡（含图+标题+价格+描述）、用户评论——单独拎出来能被转发、被订阅、被索引 -
section：官网“关于我们”“服务优势”“客户案例”三个并列模块——每块都依赖页面整体语境，单独存在时信息不自洽 - 别用
section替代div做纯布局分组；也没必要强行给每个带h2的区块都套section - 一个
article内部可以有多个section（比如一篇长文分章节），但反过来不行
header 和 footer 允许复用，但必须匹配作用域
它们不是全局独占标签，而是“上下文敏感型”——同一页面可以有多个，但每个都要服务于它所在的作用域。
立即学习“前端免费学习笔记（深入）”；
- 页面级
header：通常含 logo、主导航、搜索框 -
article内的header：只放该文章的标题、作者、发布时间（用time标签） - 错误示范：
<article><header><p>这里是无关说明</p></header>...</article>—— 没有标题类元素（h1–h6或hgroup），这个header就失去语义依据 -
footer同理：页脚版权信息用全局footer；某条评论末尾的“回复按钮+点赞数”可以用article内的footer
nav 只管“主要导航”，其他链接请自觉绕行
不是所有带 a 标签的容器都配叫 nav。它的核心职责是帮用户在站点不同一级频道间跳转。
- 属于
nav：header里的主导航菜单、左侧垂直栏目树、页脚的“快速入口”导航栏 - 不属于
nav：文章底部的“上一篇/下一篇”、表单提交按钮、社交分享图标、面包屑（更适合ol+aria-label或nav配合aria-label="breadcrumb"） - 一个页面可有多个
nav，但建议用aria-label区分，例如<nav aria-label="主菜单">和<nav aria-label="页脚导航"> - 别为了“语义化”而把所有链接都塞进
nav——机器看得懂，人反而更难维护
最容易被忽略的是：语义标签不是贴标签比赛，而是对内容角色的持续判断。改一次结构，得同步检查 main 是否还唯一、article 是否真独立、nav 里有没有混进操作按钮——这些细节不显眼，但一出问题，就是 SEO 和可访问性双崩。
