HTML5语义化基准测试需以可验证标准评估结构意图与技术理解的一致性，涵盖结构完整性、标题层级、交互语义、列表关系四类核心项，结合自动化检测与人工复核，通过0/1评分卡量化质量，并嵌入CI流程实现持续校验。
构建 HTML5 语义化基准测试，本质是用可验证、可量化的标准来评估页面是否真正遵循语义化原则，而不是仅靠肉眼判断标签是否“看起来像”<header></header>或<nav></nav>。关键在于结构意图是否与浏览器、辅助技术及搜索引擎的理解一致。
明确语义化核心检查项
基准测试应围绕 HTML5 规范中定义的内容分区、文本层级、交互上下文三类语义要素展开：
-
结构完整性：必须存在且唯一使用的
<main></main>；<header></header>和<footer></footer>需位于合理上下文中（如不能嵌套在<article></article>内却包裹整个页面） -
标题层级有效性：从
<h1></h1>开始连续递进，跳级（如<h1></h1>后直接<h3></h3>）或重复使用<h1></h1>视为缺陷 -
交互元素语义匹配：按钮必须用
<button></button>或带role="button"的元素，不可仅靠<div onclick>模拟 <li> <strong>列表与关系表达</strong>：导航、菜单、步骤等有明确顺序或归属关系的内容，必须使用<code><nav></nav>、<ol></ol>、<ul></ul>而非<div>堆砌 <h3>自动化检测 + 手动验证双轨机制</h3> <p>纯工具检测易误报（如 axe 或 Lighthouse 无法判断<code><section></section>是否真有独立主题），需结合人工复核：- 用 W3C Nu Validator 检查文档类型声明与元素嵌套合法性
- 运行
axe-core浏览器插件，重点关注region、heading-order、landmark-unique等规则 - 手动打开开发者工具 → 切换至“Accessibility”面板，查看“Landmarks”和“Heading hierarchy”是否与视觉结构对齐
- 用屏幕阅读器（如 NVDA + Firefox）朗读页面，确认导航流自然、无冗余跳转或语义断裂
建立可复用的评分卡模板
避免主观打分，将每项检查转化为 0/1 分项，汇总形成量化质量分（满分 100）：
立即学习“前端免费学习笔记（深入）”；
-
<main></main>存在且唯一：+15 分 - 标题层级连续无跳级：+20 分
- 所有交互控件具备原生语义或正确 ARIA 替代：+25 分
- 至少 90% 的内容区块使用语义元素（
<article></article>、<section></section>、<aside></aside>等）替代<div>：+20 分 <li>ARIA 属性使用合规（如<code>aria-label不冗余、aria-hidden不误用于焦点元素）：+20 分 - 在 CI（如 GitHub Actions）中调用
html-validate配置自定义规则集，例如强制禁止<div role="navigation">而要求改用<code><nav></nav> - 生成 HTML 报告时附加语义得分，并设定阈值（如低于 85 分则阻断部署）
- 为团队提供轻量 CLI 工具，支持本地运行：
npx html-validate --config .htmlvalidate.json src/**/*.html - 将常见语义错误（如缺失
<alt></alt>、误用<blockquote></blockquote>）写入 ESLint / Stylelint 插件提示，实现编码阶段拦截
持续集成中嵌入语义化校验
把语义化检查纳入构建流程，早发现问题：
