必须用而非：当页面存在唯一核心内容时（如博客正文页），且全文档仅能有一个，不可嵌套在等标签内；误用将导致辅助技术失效和seo降权。
<header></header>、<main></main>、<nav></nav>这些标签不是“加了更好”，而是“用错就埋雷”——比如把多个<header></header>塞进同一页面，或在<main></main>外再放一篇独立文章，屏幕阅读器和搜索引擎都会困惑。
什么时候必须用 <main></main> 而不能用 <div>
<p>当页面存在唯一、不可替代的核心内容区块时，<code><main></main> 是强制语义要求。典型场景：博客正文页、产品详情页、新闻单篇页。
- 一个 HTML 文档中最多只能有一个
<main></main>，且不能嵌套在 <article></article>、<aside></aside>、<footer></footer>、<header></header>、<nav></nav> 内部
- 如果页面是首页，且包含多个文章摘要（
<article></article>），<main></main> 应包裹整个内容流，而不是每个 <article></article> 单独套一个
- 用
<div class="main"> 替代 <code><main></main> 会导致辅助技术无法识别主内容起始位置，部分 SEO 工具会降权该页
<section></section> 和 <article></article> 的边界在哪
关键看内容是否“可独立分发、重用或 syndicated”。不是按视觉区块划分，而是按信息单元的自治性判断。
-
<article></article>：博客正文、用户评论、论坛帖子、新闻稿——复制粘贴到另一网站仍能成立
-
<section></section>：同一文章内的“引言”“方法论”“结论”章节；或首页里“最新动态”“客户评价”“技术栈介绍”这类逻辑分组
- 常见错误：把侧边栏菜单包进
<section></section> ——它更适合 <aside></aside>；把整篇博客包进 <section></section> ——它应是 <article></article>，且通常放在 <main></main> 内
<nav></nav> 不是所有链接集合都配得上
<nav></nav> 专指“主要导航系统”，不是页面上任意一组链接。它的存在本身就在告诉机器：“这些链接对全站跳转至关重要”。
- 页脚里的“隐私政策｜服务条款｜联系我们”通常不构成
<nav></nav>，更适合普通 <p></p> 或 <ul></ul>
- 面包屑导航（
首页 > 分类 > 文章）属于次要导航，W3C 明确建议不用 <nav></nav> 包裹
- 搜索结果页右侧的“相关推荐”链接块，即使有 10 个链接，也不属于
<nav></nav> ——它服务于当前上下文，而非全站结构
最常被忽略的一点：<header></header> 和 <footer></footer> 可以出现多次（如每个 <article></article> 都能有自己的 <header></header>），但它们的语义范围仅限于父容器。别指望一个全局 <header></header> 能自动覆盖所有子模块的标题逻辑——那得靠嵌套结构本身说话。
<main></main>，且不能嵌套在 <article></article>、<aside></aside>、<footer></footer>、<header></header>、<nav></nav> 内部<article></article>），<main></main> 应包裹整个内容流，而不是每个 <article></article> 单独套一个<div class="main"> 替代 <code><main></main> 会导致辅助技术无法识别主内容起始位置，部分 SEO 工具会降权该页
<section></section> 和 <article></article> 的边界在哪
关键看内容是否“可独立分发、重用或 syndicated”。不是按视觉区块划分，而是按信息单元的自治性判断。
-
<article></article>：博客正文、用户评论、论坛帖子、新闻稿——复制粘贴到另一网站仍能成立 -
<section></section>：同一文章内的“引言”“方法论”“结论”章节；或首页里“最新动态”“客户评价”“技术栈介绍”这类逻辑分组 - 常见错误：把侧边栏菜单包进
<section></section>——它更适合<aside></aside>；把整篇博客包进<section></section>——它应是<article></article>，且通常放在<main></main>内
<nav></nav> 不是所有链接集合都配得上
<nav></nav> 专指“主要导航系统”，不是页面上任意一组链接。它的存在本身就在告诉机器：“这些链接对全站跳转至关重要”。
- 页脚里的“隐私政策｜服务条款｜联系我们”通常不构成
<nav></nav>，更适合普通<p></p>或<ul></ul> - 面包屑导航（
首页 > 分类 > 文章）属于次要导航，W3C 明确建议不用<nav></nav>包裹 - 搜索结果页右侧的“相关推荐”链接块，即使有 10 个链接，也不属于
<nav></nav>——它服务于当前上下文，而非全站结构
最常被忽略的一点：<header></header> 和 <footer></footer> 可以出现多次（如每个 <article></article> 都能有自己的 <header></header>），但它们的语义范围仅限于父容器。别指望一个全局 <header></header> 能自动覆盖所有子模块的标题逻辑——那得靠嵌套结构本身说话。
