HTML语义化标签是浏览器、搜索引擎和屏幕阅读器理解页面结构的唯一可信依据；用错标签会导致无障碍失败、SEO权重错误及辅助技术跳过主内容。
HTML语义化标签不是“更好看的
”，而是浏览器、搜索引擎和屏幕阅读器理解页面结构的唯一可信依据。用错一个标签，就可能让辅助技术跳过主内容、让SEO抓取到错误的权重分布、甚至在无障碍测试中直接失败。
为什么
用
为什么 <main></main> 只能出现一次且不能嵌套
<main></main> 是页面中唯一被规范明确定义为“对用户最具价值内容”的容器。它的语义强度极高，浏览器会据此设置焦点顺序、屏幕阅读器会默认将其设为“跳转主内容”的快捷目标点。
- 出现两次：会导致辅助技术无法判断哪个才是真正的核心内容，部分读屏软件（如NVDA）会静默忽略第二个
<main></main> - 嵌套在
<article></article>或<section></section>内：违反HTML5规范，Chrome和Firefox会在开发者工具控制台报出Warning: <main> element must not be a descendant of another landmark element</main> - 包裹广告或侧边栏推荐：语义污染——
<main></main>的机器可识别含义是“不可替代的主体内容”，混入次要信息会稀释其语义信号，影响SEO内容权重计算
<section></section> 和 <div> 的关键区别不在视觉，而在大纲生成
<p>两者默认样式几乎一致，但<code><section></section>会主动参与文档大纲（document outline）构建，而<div>完全不参与。这个差异直接影响屏幕阅读器导航、自动生成目录插件、以及Google对页面结构的理解。
<ul><li>
<code><section></section> 必须有标题（<h1></h1>–<h6></h6>），否则它在大纲中不形成独立节点，等价于一个无意义的<div>
<li>把多个<code><section></section>并列放置但没用<h2></h2>区分主题，会导致大纲层级坍缩，读屏软件播报时变成“Section, Section, Section”而无上下文
<div class="section-about">模拟<code><section></section>：CSS样式可以一样，但不会出现在document.querySelectorAll('section')结果里，也不会被aria-labelledby自动关联
<nav></nav> 不等于“有链接的容器”，而是导航意图的显式声明
<nav></nav> 的语义锚点是“提供全局或局部导航路径”，它触发的是辅助技术中的“导航区域”快捷键（如JAWS的Insert+N），而不是单纯渲染一组链接。
- 页脚里的“关于我们｜联系方式｜隐私政策”链接组合：不属于
<nav></nav>范畴，应使用<footer></footer>内的普通<p></p>或<ul></ul>，否则会干扰导航流优先级 - 文章末尾的“上一篇｜下一篇”：属于内容内联导航，推荐用
<nav aria-label="文章导航"></nav>并加role="navigation"补全语义，避免与顶部主导航混淆 - 动态加载的菜单（如点击展开的侧边栏）：必须确保初始DOM中已存在
<nav></nav>标签，仅靠JS插入<nav></nav>元素不会被读屏软件识别为导航区
真正难的不是记住每个标签怎么写，而是每次写<header></header>时问自己：这里是否承载入口信息？写<time></time>时是否同时提供了人类可读文本和机器可解析的datetime？语义化失效往往发生在“看起来没问题”的地方——比如<section></section>没标题、<main></main>里塞了广告位、<nav></nav>包住了搜索框。这些细节不报错，但会让语义链在某个环节悄然断裂。
