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