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