必须全局唯一且禁止嵌套，不得出现在、、、内部；仅限导航链接；必须含–标题。
语义化不是“把div换成nav就完事”，而是让每个标签承担它该表达的内容角色——结构错位比不用语义标签危害更大。
哪些标签必须全局唯一且禁止嵌套？
关键限制就三条，踩中任意一条，SEO 和屏幕阅读器都会失效：
-
<main></main>必须全局唯一，且不能出现在<header></header>、<footer></footer>、<nav></nav>、<section></section>内部；否则会被辅助技术忽略主体内容 -
<nav></nav>只能包裹跳转类链接（<a></a>）或带role="link"的按钮；塞进搜索表单、登录入口就破坏语义链 -
<section></section>必须自带标题（<h2></h2>–<h6></h6>），否则大概率该用<div>；没有标题的 <code><section></section>会让爬虫误判为“不可独立分发的内容”什么时候该用
而不是 ？ 区别不在视觉，而在内容能否被单独抓取、订阅或分享：
-
<article></article>：内容有明确作者、发布时间、可独立存在（如博客正文、新闻稿、用户评论）；RSS 抓取、微信分享卡片都依赖这个标签识别“一篇完整文章” -
<section></section>：只是逻辑分组，比如“相关推荐”“评论列表”“产品参数表”；它不承诺独立性，也不需要<time></time>或<address></address> - 常见错误：
<section></section>里嵌套多个<article></article>是合法的；但反过来，把整页博客当一个<section></section>包裹，就丢掉了核心语义
为什么用了
和 因为它们被隐藏或覆盖了语义角色：
-
<header></header>被设为display: none或visibility: hidden，会直接从无障碍树中移除 - 在
<header></header>外层加了aria-hidden="true"，等于告诉屏幕阅读器“这块别读” - 没配
<h1></h1>：虽然<header></header>本身不要求标题，但若内部无<h1></h1>，很多阅读器不会将其识别为“页面头部地标（landmark）” - 验证方法：打开 Chrome DevTools → Elements 面板 → 右键
<header></header>→ “Inspect Accessibility Properties”，确认 role 是banner
怎么让团队不把语义化变成摆设？
靠文档和口头强调没用，得靠机器卡死：
- CI 流程里跑
htmlhint，强制校验：id-unique（防多个<main></main>）、headings（禁 h2 后直接 h4）、attr-req-alt（<img>必须有alt） - VS Code 安装 HTMLHint 插件，保存即报错；新人第一天就要看到本地构建失败红标
- Code Review 明确查三项：
<h1></h1>是否缺失或重复、<main></main>是否被嵌套、<button></button>是否被<div onclick> 替代 <li>PR 描述禁用“已语义化”这种话，必须贴出 DOM 结构对比截图，标出 <code><nav></nav>和<main></main>实际位置
最常被忽略的一点：语义标签一旦用了，就得让它“活”着——不能用 CSS 隐藏，不能用 ARIA 覆盖，更不能为了视觉效果把它塞进错误父容器。否则，你写的不是结构，是障眼法。
-
