必须唯一且为直接子元素，不可嵌套于等标签内，否则会导致屏幕阅读器跳过、seo降权及lighthouse报错；它标识页面唯一核心内容，非布局容器。
<article></article>、<nav></nav>、<main></main>、<header></header>、<footer></footer> 这五个标签是让网页逻辑真正清晰的核心——它们不是“看起来更整齐”，而是直接告诉浏览器、搜索引擎和屏幕阅读器“这部分内容在整页中扮演什么角色”。
为什么<article></article>不能被<section></section>或<div>替代
<p>一个独立可分发的内容单元（比如博客正文、新闻稿、产品卡片）必须用 <code><article></article>。它自带隐式大纲层级，会重置标题计数，让 <h1></h1> 在其中合法且语义正确。
-
<section></section> 只表示“有主题的区块”，不承诺独立性；RSS 解析器、聚合工具会忽略它
<div> 完全无语义，机器无法区分它是广告位、弹窗容器还是正文包装
<li>滥用 <code><section></section> 替代 <article></article> 会导致 SEO 工具误判内容权重，尤其影响 Google 的“文章结构富摘要”识别
<nav></nav> 和普通链接列表的关键区别
<nav></nav> 不是“加个 class 的 ul”，它的存在本身即声明：“这组链接用于页面级导航”。辅助技术（如读屏器）会为它提供快捷跳转指令（例如 JAWS 的 N 键）。
- 只用于主要导航区域（顶部主导航、侧边栏主菜单），页脚的“关于我们/条款”等次要链接不用
<nav></nav>
- 内部必须是
<a></a> 或带 role="link" 的元素；含表单控件或按钮的“导航区”需重构，否则破坏语义
- 多个
<nav></nav> 允许，但建议用 aria-label 区分用途，例如 <nav aria-label="主导航"></nav> 和 <nav aria-label="文章内目录"></nav>
<main></main> 的唯一性与嵌套陷阱
每个页面有且仅有一个 <main></main>，它代表对用户最具价值的主体内容。它不能出现在 <article></article>、<aside></aside> 或 <footer></footer> 内部——这是 HTML 规范硬性限制。
- 若 CMS 输出多个
<main></main>，浏览器会静默忽略后续的，但 Lighthouse 等工具会报严重错误
-
<main></main> 内部可以有多个 <article></article>（如首页文章流），但不能包裹页眉页脚
- 老旧浏览器（IE11 及以下）不识别
<main></main>，需配合 role="main" 保底，但不要写成 <main role="main"></main>（冗余）
最容易被忽略的是：语义清晰不靠标签数量，而靠**上下文一致性**。比如 <header></header> 在 <article></article> 内部时，它属于那篇文章的元信息区；而在
<section></section> 只表示“有主题的区块”，不承诺独立性；RSS 解析器、聚合工具会忽略它<div> 完全无语义，机器无法区分它是广告位、弹窗容器还是正文包装
<li>滥用 <code><section></section> 替代 <article></article> 会导致 SEO 工具误判内容权重，尤其影响 Google 的“文章结构富摘要”识别
<nav></nav> 和普通链接列表的关键区别
<nav></nav> 不是“加个 class 的 ul”，它的存在本身即声明：“这组链接用于页面级导航”。辅助技术（如读屏器）会为它提供快捷跳转指令（例如 JAWS 的 N 键）。
- 只用于主要导航区域（顶部主导航、侧边栏主菜单），页脚的“关于我们/条款”等次要链接不用
<nav></nav> - 内部必须是
<a></a>或带role="link"的元素；含表单控件或按钮的“导航区”需重构，否则破坏语义 - 多个
<nav></nav>允许，但建议用aria-label区分用途，例如<nav aria-label="主导航"></nav>和<nav aria-label="文章内目录"></nav>
<main></main> 的唯一性与嵌套陷阱
每个页面有且仅有一个 <main></main>，它代表对用户最具价值的主体内容。它不能出现在 <article></article>、<aside></aside> 或 <footer></footer> 内部——这是 HTML 规范硬性限制。
- 若 CMS 输出多个
<main></main>，浏览器会静默忽略后续的，但 Lighthouse 等工具会报严重错误 -
<main></main>内部可以有多个<article></article>（如首页文章流），但不能包裹页眉页脚 - 老旧浏览器（IE11 及以下）不识别
<main></main>，需配合role="main"保底，但不要写成<main role="main"></main>（冗余）
最容易被忽略的是：语义清晰不靠标签数量，而靠**上下文一致性**。比如 <header></header> 在 <article></article> 内部时，它属于那篇文章的元信息区；而在 顶层时，它才是整个页面的页眉——同一标签，不同嵌套位置，语义自动切换。这种能力只有原生语义标签能提供，CSS 类永远做不到。
