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