真正有效的语义判断是看标签是否与内容真实对应且被辅助技术、搜索引擎按预期识别；用chrome devtools的accessibility面板检查标题层级连续性、和识别准确性、/独立意义、/属性完整性等。
只靠 W3C Validator 或数标签个数，根本判不出语义对不对——它验语法，不验意图。真正有效的判断方式，是看标签是否与内容真实对应，且被辅助技术和搜索引擎按预期识别。
用 Chrome DevTools 的 Accessibility 面板看大纲结构
这是最直接、零配置的验证手段。打开 DevTools →「Accessibility」→ 展开「Heading level」，重点观察两点：
- 标题层级是否连续：比如出现
<h1></h1>后直接跳到<h3></h3>，说明语义断裂 -
<main></main>是否被正确识别为“Main content”，<nav></nav>是否被标记为“Navigation”而非“Section” - 若某块区域显示为“Section”但没标题、或被读作“Generic”，大概率是误用了
<section></section>
检查 <main></main> 和 <nav></nav> 的嵌套与用途
这两个标签最容易出错，而且错一次就破坏整页结构锚点：
-
<main></main>必须且只能有一个，且不能出现在<header></header>、<nav></nav>、<footer></footer>、<aside></aside>内部——哪怕只多一层 wrapper<div>，辅助技术也会丢失主内容定位 <li> <code><nav></nav>只能包裹主导航链接集合；侧边栏菜单、分页、面包屑、搜索框、登录按钮都不算——塞进去等于告诉屏幕阅读器“这些是导航”，实际却不是 - 多个
<nav></nav>是允许的，但必须加aria-label区分用途，例如<nav aria-label="主导航"></nav>和<nav aria-label="页脚导航"></nav> - 把这块 HTML 单独保存为文件，能否脱离原页面被理解？能 →
<article></article>或<section></section>合理；不能 → 该用<div> <li> <code><section></section>内部必须有<h2></h2>–<h6></h6>标题，否则对大纲无贡献，纯属噪音 -
<article></article>强调可独立分发（如 RSS 抓取、转发），<section></section>强调文档内逻辑分组（如“兼容性说明”“示例代码”）；把整页用户列表包进一个<section></section>是错的，每条记录才该是<article></article> -
<time datetime="2024-03-15"></time>的datetime值必须是机器可读格式（ISO 8601），否则屏幕阅读器无法播报日期，只读“3月15日”这种模糊文本 -
<img>缺alt属性，等于主动屏蔽视障用户；空字符串alt=""仅适用于纯装饰图，且需确认其确实不传递信息 -
<button></button>被替换成<div onclick>，会丢失键盘焦点、空格/回车触发、自动 ARIA role，这不是样式问题，是交互断层 <p>最容易被忽略的是：语义化不是“多用新标签”，而是“不用错标签”。一个硬套的 <code><section></section>比一个干净的<div> 更糟——它向辅助工具发送了错误信号，且无法被撤回。</div>
验证 <section></section> 和 <article></article> 是否真有独立意义
它们不是“视觉分块”，而是“语义单元”。判断标准非常具体：
留意 <time></time>、<img> 等细节标签的属性完整性
这些标签的语义依赖属性，漏掉就等于没用：
