HTML语法合法性需通过W3C验证器校验，CI中应集成nu-html-checker并设error级失败阻断；语义结构须正确使用<header><main><nav>等标签，避免伪语义化；可访问性需结合axe扫描与人工键盘/VoiceOver测试；质量监控需分层卡点并纳入每日看板。
HTML语法是否合法？W3C验证器不是摆设
HTML质量的第一道门槛是语法正确性，但很多人只用浏览器“能渲染”就认为没问题。实际上线后，未闭合的 <div>、错位的 <table> 嵌套、遗漏的 alt 属性，都会在SEO、可访问性或老版本浏览器中暴露问题。
真正有效的做法是把 w3c validator 集成进 CI 流程，而不是人工点开网页验证。它能精确报出：Element “img” is missing required attribute “alt”、Stray end tag “div”、Unclosed element “p” 这类错误。注意：HTML5 允许省略某些自闭合标签斜杠（如 <img src="x">），但 W3C 默认按严格模式校验，需在配置中明确指定 doctype: html5 才避免误报。
- 本地验证可用
nu-html-checkerCLI 工具，支持批量扫描整个dist/目录 - CI 中建议设置失败阈值：只要出现
error级别问题即中断构建，warning可设为非阻断但计入质量分 - 不要忽略“警告”——比如
Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings.，这类语义缺失会直接影响屏幕阅读器体验
语义结构是否合理？<div> 不等于无罪
一堆嵌套 <div> 能跑，但不等于结构合格。搜索引擎和辅助技术依赖语义标签推断内容层级与功能意图。用 <header> 替代 <div class="header"> 不是“炫技”，而是让 aria-labelledby、skip link 机制真正生效。
检查重点不在“用了没”，而在“用得对不对”：例如 <main> 必须有且仅有一个；<nav> 应包裹导航链接而非操作按钮；<article> 和 <section> 的嵌套关系不能倒置（<article> 可含多个 <section>，反之不成立）。
立即学习“前端免费学习笔记（深入）”；
- 用
axe-core的document.hasLandmark规则检测页面是否缺失关键地标（landmark） - Chrome DevTools 的“Accessibility”侧边栏可实时高亮语义层级断裂点
- 警惕“伪语义化”：给
<div role="button">加了 ARIA 却没配键盘事件（Enter/Space），反而比原生<button>更不可访问
可访问性是否真实可用？别只看 axe 报告里的绿勾
自动化工具能发现约 30–40% 的可访问性问题，比如缺失 alt、对比度不足、表单无 <label>。但更多问题藏在交互逻辑里：焦点顺序混乱、模态框关闭后焦点未回退、动态内容更新未触发 aria-live 区域。
真实评估必须结合人工测试：用键盘 Tab 导航走一遍流程，禁用 CSS 后确认信息层次是否仍清晰，打开 VoiceOver 或 NVDA 实际听一遍朗读顺序。尤其注意 JavaScript 渲染的 SPA 页面——axe 扫描的是初始 DOM，而异步加载的内容可能根本没被检测到。
- 强制要求所有交互组件通过
keyboard-only操作验证，包括下拉菜单、日期选择器、分页控件 - 对动态内容（如搜索建议、通知弹窗），必须显式声明
aria-live="polite"或"assertive"，并控制更新频率 -
color-contrast规则只测静态色值，但实际中背景图、半透明遮罩、CSS 滤镜都可能降低文本可读性，需手动验证
HTML质量如何持续监控？CI 里加一行命令远远不够
把 htmlhint 或 w3c validator 塞进 CI 是起点，不是终点。真正的落地难点在于规则收敛和权责对齐：前端团队常认为“样式不影响功能”，但 inline style 会导致 SSR 渲染失效；后端模板生成 HTML 时若未转义用户输入，htmlhint 根本无法捕获 XSS 风险。
可行路径是分层卡点：pre-commit 检查基础语法 + 语义标签；CI build 阶段运行 axe + 对比 baseline（如上一版 Lighthouse 可访问性得分）；CD 部署前 用 Puppeteer 抓取真实渲染后的 DOM，验证关键节点是否存在、属性是否符合预期（如 data-testid 是否被意外删除）。
- 避免规则“一刀切”：营销页允许宽松的
img-alt规则（装饰图可设alt=""），但产品文档页必须 100% 强制 - 将 HTML 质量指标（如 landmark 数量、对比度达标率）写入每日质量看板，和 JS 错误率、首屏时间并列展示
- 最易被忽略的是“变更影响面”：一个
<h2>改成<span>看似微小，却可能让整页 SEO 权重重分配——需要配套的语义影响分析脚本
