main标签必须唯一且位于body直接子级，禁止嵌套；header/footer可复用于各区块；article用于可独立分发内容，section用于主题分组；nav内仅允许导航链接。
main 标签必须唯一且不能嵌套
浏览器和屏幕阅读器靠 main 识别页面核心内容起点，重复或嵌套会直接破坏信息流。常见错误是 CMS 模板里全局插入一个 main，又在正文区域再套一层 —— 结果 DOM 中出现两个 main，读屏器跳过第二个，SEO 工具判定结构断裂。
实操建议：
-
main只能出现在body直接子级，且全页面仅一次 - 不要把
article或section包进main里再加一层main——main本身已是语义终点 - 若用前端框架（如 React/Vue）动态渲染，确保 SSR 或 hydration 后 DOM 中仍满足该约束
header 和 footer 不只属于页面顶层
很多人以为 header 只能用在页面最上面、footer 只能放在最底下，其实它们是“就近绑定”的语义容器：每篇 article、每个 section 都可以有自己的 header 和 footer，用来包裹该区块的标题、作者、时间、标签、分享按钮等。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 把发布时间写成
<p class="date">2026-06-20</p>，而不是<time datetime="2026-06-20">6月20日</time> - 用
<div class="article-header">替代<header>，失去 ARIA role 和大纲锚点 -
footer放在article外面，导致读屏器无法将“相关链接”与对应文章关联
section 和 article 的边界由“可独立分发”决定
不是视觉卡片多就该套 article，关键看它能否脱离当前页面被 RSS 抓取、邮件转发或单独分享。首页上并列三篇博客，每篇都该是独立 article；但“关于我们”页里“团队介绍”“发展历程”“企业文化”三个板块，只是同一主题下的逻辑分组，用 section 更准确。
判断依据：
-
article自带隐式aria-roledescription="article"，会被聚合工具识别 -
section必须有明确主题，且推荐以h2~h6开头 —— 空section是结构噪音 - 嵌套层级超过 4 层时，大概率该重构：用
article切分内容单元，而非靠div+ class 堆叠
导航链接必须严格限定在 nav 标签内
nav 不是“顶部那条横栏”的样式容器，而是语义契约：里面只允许放跳转链接。塞进图标、logo、搜索框、登录按钮，都会让辅助技术误判导航意图，也影响 SEO 权重分配。
真实使用场景：
- 主导航菜单（
a或button触发路由）—— 放nav - 页内锚点导航（如文档目录）—— 也放
nav，但需加aria-label="文档目录" - 页脚的友情链接、版权信息、备案号 —— 不属于
nav，应归入footer
复杂点在于多级导航：子菜单必须仍是 nav 的直接子元素（如 ul），不能靠 JS 动态插入后脱离语义上下文；否则键盘焦点流断裂，读屏器跳过整个子项。
