真正语义化的标签是、、、、、等，它们表达内容角色而非仅视觉样式，需严格遵循嵌套规则、主题独立性及可访问性要求。
哪些标签算真正语义化，而不是“看起来像”
语义化不是给 <div> 换个名字，而是让标签本身表达内容角色。浏览器、屏幕阅读器、搜索引擎靠这个理解结构。<code><article></article>、<section></section>、<nav></nav>、<aside></aside>、<header></header>、<footer></footer> 是核心，但用错比不用更糟。
常见错误现象：<section></section> 套 <section></section> 三层，里面全是标题+段落，实际只是同一主题下的几个小点；或者把侧边广告栏硬塞进 <aside></aside>，但它和主内容毫无逻辑关联。
-
<article></article>必须能独立分发或复用（比如一篇博客、一条新闻、一个用户评论） -
<section></section>要有明确的主题，且该主题在文档大纲中应有对应层级的<h2></h2>–<h6></h6> -
<aside></aside>内容必须可移除而不影响主干逻辑（如术语解释、作者简介、相关链接） - 避免用
<header></header>包整个页面顶部导航+logo+搜索框——它只应包裹本节的头部内容，不是“页眉”的视觉容器
嵌套规则：为什么 里还能有 ，但不能随便套
HTML5 的大纲算法依赖嵌套关系生成逻辑层级。错误嵌套会让屏幕阅读器读出混乱的结构，也影响 SEO 抓取重点。
使用场景：一篇技术文章页面，整体是 <article></article>；其中“兼容性说明”“性能对比”“示例代码”三个部分各自有 <h2></h2>，就该用 <section></section> 包裹，而不是全用 <div class="section">。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>
<code><article></article> 可以包含多个 <section></section>，每个 <section></section> 应有自己的一级子标题（<h2></h2> 或更低）
<section></section> 内部不应再用 <section></section> 表达并列关系，而应考虑是否该拆成多个 <article></article>（比如评论列表里的每条评论）
<div> 仅用于纯样式或脚本钩子，不参与语义结构——加了 <code>role="region" 也不等于语义化
浏览器兼容与 polyfill 的真实代价
IE8 及更早版本完全不识别 <article></article> 等新标签，但现代项目基本无需支持。真正要注意的是：即使加了 document.createElement('article') 或引入 html5shiv，也只是让 IE 能样式化，**不会修复大纲解析缺陷**。
性能影响很小，但兼容性陷阱在于：某些旧版辅助工具（如 JAWS 15）对嵌套 <section></section> 的层级识别不准，可能跳过中间层级。
- 如果必须支持 IE9 以下，语义化优先级应降级为 class 模拟 + ARIA 属性（如
role="article"），而非强依赖标签
- 不要以为加了 html5shiv 就“搞定语义化”——它不提供语义，只提供可样式化的节点
- Chrome/Firefox/Safari 对大纲算法的支持已稳定，但 Safari 在
<main></main> 和 <nav></nav> 的隐式 role 推断上仍有细微差异
验证语义是否生效：别只看渲染效果
渲染正常 ≠ 语义正确。真正起作用的地方在浏览器开发者工具的“Accessibility”面板、或用 axe 浏览器插件扫描，看是否生成了预期的文档结构树。
常见错误现象：用了 <nav></nav>，但里面是 <div> + JS 控制的下拉菜单，没加 <code>aria-expanded 和 aria-haspopup，辅助工具仍当它是普通容器。
- 检查 Chrome DevTools → Elements → 右键节点 → “Inspect Accessibility Tree”，确认角色（role）、名称（name）、层级是否符合预期
- 运行
document.body.innerHTML 不会暴露语义问题，但 document.querySelector('main').getAttribute('role') 可验证是否被正确识别
- 用
npx axe-cli https://yoursite.com 批量检测，重点关注 “landmark-unique”、“heading-order” 类规则
最容易被忽略的是：语义标签不自动带来可访问性。比如 <nav></nav> 没配 aria-label，多组导航时屏幕阅读器无法区分“主导航”和“页脚导航”。这一步漏掉，前面所有语义都打折扣。
HTML5 的大纲算法依赖嵌套关系生成逻辑层级。错误嵌套会让屏幕阅读器读出混乱的结构，也影响 SEO 抓取重点。
使用场景：一篇技术文章页面，整体是 <article></article>；其中“兼容性说明”“性能对比”“示例代码”三个部分各自有 <h2></h2>，就该用 <section></section> 包裹，而不是全用 <div class="section">。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>
<code><article></article> 可以包含多个 <section></section>，每个 <section></section> 应有自己的一级子标题（<h2></h2> 或更低）
<section></section> 内部不应再用 <section></section> 表达并列关系，而应考虑是否该拆成多个 <article></article>（比如评论列表里的每条评论）<div> 仅用于纯样式或脚本钩子，不参与语义结构——加了 <code>role="region" 也不等于语义化
浏览器兼容与 polyfill 的真实代价
IE8 及更早版本完全不识别 <article></article> 等新标签，但现代项目基本无需支持。真正要注意的是：即使加了 document.createElement('article') 或引入 html5shiv，也只是让 IE 能样式化，**不会修复大纲解析缺陷**。
性能影响很小，但兼容性陷阱在于：某些旧版辅助工具（如 JAWS 15）对嵌套 <section></section> 的层级识别不准，可能跳过中间层级。
- 如果必须支持 IE9 以下，语义化优先级应降级为 class 模拟 + ARIA 属性（如
role="article"），而非强依赖标签 - 不要以为加了 html5shiv 就“搞定语义化”——它不提供语义，只提供可样式化的节点
- Chrome/Firefox/Safari 对大纲算法的支持已稳定，但 Safari 在
<main></main>和<nav></nav>的隐式 role 推断上仍有细微差异
验证语义是否生效：别只看渲染效果
渲染正常 ≠ 语义正确。真正起作用的地方在浏览器开发者工具的“Accessibility”面板、或用 axe 浏览器插件扫描，看是否生成了预期的文档结构树。
常见错误现象：用了 <nav></nav>，但里面是 <div> + JS 控制的下拉菜单，没加 <code>aria-expanded 和 aria-haspopup，辅助工具仍当它是普通容器。
- 检查 Chrome DevTools → Elements → 右键节点 → “Inspect Accessibility Tree”，确认角色（role）、名称（name）、层级是否符合预期
- 运行
document.body.innerHTML不会暴露语义问题，但document.querySelector('main').getAttribute('role')可验证是否被正确识别 - 用
npx axe-cli https://yoursite.com批量检测，重点关注 “landmark-unique”、“heading-order” 类规则
最容易被忽略的是：语义标签不自动带来可访问性。比如 <nav></nav> 没配 aria-label，多组导航时屏幕阅读器无法区分“主导航”和“页脚导航”。这一步漏掉，前面所有语义都打折扣。
