<main>必须且只能出现一次，因其是页面唯一语义锚点，供屏幕阅读器“M键直达”和搜索引擎提取核心主题；重复或嵌套会致辅助技术误判、Lighthouse报错、SEO降权。
<main> 必须且只能出现一次，<nav> 和 <header> 可以多个，但滥用会破坏语义——这是 index.html 中语义化标签最常被误用的硬性边界。
为什么 <main> 不能嵌套或重复？
浏览器和屏幕阅读器依赖 <main> 定位唯一核心内容。重复使用会让辅助技术无法判断“哪个才是主内容”，搜索引擎也可能降权或忽略部分 <main> 块。
- 错误写法：
<main><h2>首页</h2></main><main><h2>关于我们</h2></main> - 正确做法：用
<section>划分页面模块，<main>包裹全部主体区域 -
<main>内部不能出现<header>、<footer>、<nav>的全局副本（如页脚版权信息）
<nav> 不是所有链接容器的通用解药
<nav> 专指“主要导航区块”，不是每个带链接的 <div> 都该替换。它触发的是 ARIA navigation role，会被屏幕阅读器列为可跳转 landmark。
- 适合：
<nav>包裹顶部菜单、侧边栏目导航、面包屑 - 不适合：文章末尾的“上一篇/下一篇”、页脚一堆杂项链接、登录框里的“忘记密码”
- 替代方案：普通链接用
<a>即可；需要语义但非主导航时，考虑<aside>或带aria-label的<div>
<article> 和 <section> 的本质区别在哪？
关键不在“是否带标题”，而在“是否自包含、可独立分发”。<article> 是内容单元（RSS 可抓取、打印可单独成页），<section> 是逻辑分区（比如长文的“背景”“方法”“结论”章节）。
立即学习“前端免费学习笔记（深入）”；
- 博客首页列表：每个条目用
<article>，整个列表外层用<main>+<section> - 商品详情页：“规格参数”“用户评价”“售后说明”是
<section>，每条评论是<article> - 错误混淆：
<section>里没<h2>不违法，但<article>缺标题会削弱语义强度
<header> 和 <footer> 的嵌套自由度被严重低估
它们不只属于整个页面——可出现在 <article>、<section> 甚至 <aside> 内部，表示该区块自身的头部或尾部。
<article><header><h2>标题</h2><time datetime="2026-05-28">五月二十八日</time></header><p>正文...</p></article><section><header><h3>相关推荐</h3></header><ul>...</ul><footer><p>共 5 篇</p></footer></section>- 注意：
<header>里放<nav>是常见且合法的，但<nav>里再套<header>就容易造成角色嵌套混乱
真正难的不是记住标签名，而是每次写 <div> 前下意识问一句：“这个区块如果脱离当前页面，还能被理解、被重用、被机器识别吗？”——答案决定了该用 <article>、<section> 还是干脆就用 <div>。
