语义化成立需标签真实存在且用法正确：在chrome devtools elements面板搜索原生header、nav等标签，若显示为则可能因缺少doctype触发怪异模式；w3c校验仅管语法，不查标题缺失或role滥用等语义缺陷。
直接看 DOM 结构里有没有 header、nav、main、article、section、aside、footer 这些标签，且它们的使用方式是否符合内容角色——不是“用了就算”，而是“用得对不对”才决定语义化是否成立。
怎么快速确认语义标签真实存在且未被降级
打开 Chrome DevTools → Elements 面板，搜索 <header></header> 或 <main></main> 等标签名。如果看到的是原生标签（不是被 JS 动态生成的字符串或自定义标签），说明已正确解析。
- 若页面用了
<section></section>却在 Elements 里显示为<div>，大概率是没加 <code>，触发了怪异模式（Quirks Mode） <li>IE8 及更早版本需手动执行 <code>document.createElement('section')才能识别，现代项目基本不用管，但查老系统时要留意 - CSS 中写
article { display: block; }能生效，就说明浏览器已识别该标签；如果样式不生效，先检查是不是 CSS 文件加载失败或缓存旧版 -
section必须有h2–h6标题，否则在 NVDA/VoiceOver 中基本不可见，工具也不报错 -
nav里塞了搜索框或登录按钮，Validator 不会拦，但已违背“纯导航链接集合”的本意 - 用
<div role="navigation"> 替代 <code><nav></nav>，语法合法，但失去原生快捷键（如 Ctrl+Alt+N）支持哪些 DOM 查询结果能反映真实语义质量
在 Console 里运行简单查询，比数标签个数更有意义：
-
document.querySelectorAll('main').length === 1—— 页面必须且只能有一个main -
document.querySelectorAll('article').forEach(el => el.querySelector('h2, h3'))—— 每个article应含标题，否则独立性存疑 -
document.querySelectorAll('section').forEach(el => el.querySelector('h2, h3'))—— 同理，无标题的section是语义断裂信号 -
document.querySelectorAll('img[alt=""]').length + document.querySelectorAll('img:not([alt])').length—— 查漏alt属性，这是语义链最基础一环
最容易被忽略的语义污染点
开发者常把“用了语义标签”当成终点，其实真正的坑在细节耦合上：比如给
div加role="article"却没补aria-labelledby，或把整页用户列表包进单个section而不拆出每个用户的article。这些操作让结构看似升级，实则破坏了大纲层级和辅助技术跳转逻辑——工具扫不出来，但盲人用户会卡在第一个容器里出不去。 -
为什么 W3C Validator 检查通过 ≠ 语义化达标
W3C Validator 只验证语法合法性，比如 main 是否嵌套在 header 里、nav 是否包含至少一个链接——但它不会告诉你“这个 section 下面没配 h2，大纲里根本看不到它”。
