语义化达标需标签与内容真实对应且符合html5大纲算法，应结合html5大纲插件、axe devtools和手动js验证，避免仅依赖w3c语法检查。
不能只靠“用了几个 <nav></nav>”来判断——语义化是否达标，取决于标签是否与内容真实对应、是否符合 HTML5 sectioning algorithm 的解析逻辑。
用 HTML5 大纲插件看浏览器怎么理解你的结构
这是最直接暴露语义问题的方式。安装 Chrome 扩展如 HTML5 Outliner 或 HeadingMap，打开页面后点击图标，它会生成一份纯基于标签和标题嵌套的文档大纲。
- 如果出现多个顶层条目（即无缩进的节点），大概率是页面存在多个
<h1></h1>，或<main></main>包裹了非主体内容（比如把整个页头也塞进去了） - 看到 “Untitled section” 不一定错，但若高频出现，说明你漏写了 heading（如
<h2></h2>），或用<div> 替代了 <code><section></section>/<article></article> - 大纲中标题跳级（
<h2></h2>后直接<h4></h4>）会导致屏幕阅读器朗读断裂，必须补全中间层级或重构 heading 顺序 - 整个大纲只显示 “Document”，说明页面几乎没用任何语义容器或有效标题——连
<header></header>、<main></main>都可能缺失 -
landmark-unique：报错说明有多个<main></main>，或<nav></nav>缺少aria-label导致无法区分（比如页头和页脚都有导航） -
heading-order：不是只检查 h1–h6 是否存在，而是验证它们是否构成连续、嵌套合理的层级流；<h3></h3>出现在没有父级<h2></h2>的<section></section>里，也会被标出 - 特别注意
<nav></nav>里混入搜索框、登录按钮——axe 不会报错，但违反语义本意；得人工确认其内容是否“可被独立识别为导航目的”
用 axe DevTools 检查 landmark 和 heading-order 规则
W3C Validator 只管语法，axe 能盯住语义意图是否被正确表达。在 Chrome 中装好 axe DevTools 插件，打开 DevTools → axe → Run analysis，重点看两个规则组：
手动验证关键结构约束是否被破坏
有些规则太基础，工具反而不报——因为它们属于“必须成立”的前提，一旦失效，整页语义就崩了。你需要自己写一行 JS 在 Console 里跑：
document.querySelectorAll('h1').length === 1 &&
document.querySelectorAll('main').length === 1 &&
!document.querySelector('main').closest('header, nav, aside') &&
Array.from(document.querySelectorAll('nav')).every(n => n.contains(document.querySelector('a')))
这段代码检查四件事：<h1></h1> 唯一、<main></main> 唯一、<main></main> 没被包在其他 landmark 里、每个 <nav></nav> 至少含一个链接。只要返回 false，就得立刻翻源码。
-
<main></main>被包在<header></header>里是常见错误，尤其 SSR 框架模板嵌套过深时容易发生 - 用
<div role="navigation"> 替代 <code><nav></nav>，W3C Validator 和 axe 都不会拦——但它让 Safari VoiceOver 失去原生导航跳转能力 -
<section></section>套着单个按钮或整页用户列表，工具无法判断“是否可独立分发”，只能靠人看：这条内容删掉，页面主干是否还成立？ - 它会放过所有
role属性拼写错误（如roel="banner"），而 axe 会立刻标红 - 它不检查
<label></label>是否真关联了控件——for="xxx"指向一个不存在的id，照样绿灯 - 动态插入的 DOM（如 React 渲染后的内容）不在它的检测范围内；你得验构建产物
dist/index.html，而不是开发时的模板文件
别让 W3C Validator 给你假安全感
访问 https://validator.w3.org/nu/ 粘贴代码，它只告诉你语法对不对，比如 <main></main> 是否闭合、是否嵌套在 <p></p> 里——但它完全不管 <main></main> 里有没有塞进页脚版权，也不管 <img> 的 alt 是空字符串还是缺失。
真正容易被忽略的点是：语义标签必须和内容粒度匹配。<article></article> 应该包裹一条可单独订阅、分享、存档的内容，而不是“用户列表”这种集合容器；这个边界没法靠工具自动划清，得你在写 <section></section> 前停半秒，问自己一句：“它能独立存在吗？”
