html代码质量达标需通过三类硬性检查：语法解析零error、语义结构可被辅助技术识别、关键元信息完整；w3c验证器error必须清零，lang属性缺失、alt为空、h1缺位、meta charset="utf-8"未置head最前等均为上线前必须修复项。

怎么判断HTML代码质量是否达标

不是“看着整齐”就算合格，而是看它能否通过三类硬性检查：语法解析不报错、语义结构可被辅助技术识别、关键元信息完整。W3C验证器报error必须清零；lang属性缺失、alt为空、h1缺位、meta charset="utf-8"没写在最前面——这些都不是“建议”，是上线前必须修复的问题。

语义标签用错比不用更危险

常见错误是把<section></section>当<div>用，或者给导航栏套<code><article></article>。语义标签不是装饰品，浏览器和读屏软件会据此构建DOM树和朗读逻辑。比如<nav></nav>必须包裹一组导航链接，不能只包一个<a></a>；<main></main>在整个页面中只能出现一次，且不能嵌套在<article></article>或<aside></aside>里。

• <header></header>和<footer></footer>可以多次使用，但每个都应服务于其直接父容器的内容上下文
• <aside></aside>不是“右边栏”，而是与主内容相关但可独立存在的旁注（如作者简介、延伸阅读）
• 纯视觉分隔用<hr>，别用<div>加CSS border模拟<h3>自动化检查为什么总漏掉关键问题</h3> <p>工具能抓<code><img>缺alt，但抓不出alt="图片"这种无效值；能报h2后直接跳h4，但无法判断标题层级是否真反映内容逻辑。所以必须配人工复查点：
  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载
  • 打开Chrome DevTools的“Accessibility”面板，检查aria-labelledby是否指向真实ID
  • 用VoiceOver或NVDA实际朗读页面，确认导航流和焦点顺序合理
  • 删掉所有CSS，看纯HTML结构是否仍能表达清晰的信息层次

  CI/CD里加HTML检查容易踩哪些坑

  很多团队把htmlhint塞进npm run lint就以为万事大吉，结果发现PR里一堆“warning”没人理。真正有效的集成要满足三点：

  • 把htmlhint配置里的warn全转成error，CI失败即阻断合并
  • 排除node_modules和生成目录（如dist/），只检查源码中的.html和模板文件（如.ejs、.njk）
  • 搭配axe-core CLI跑可访问性扫描，阈值设为--exit-code=1 --reporter=cli，任何中高风险项都触发失败

  最常被忽略的是：工具链只检查静态HTML，但实际页面可能由JS动态注入内容。这类场景必须额外跑Lighthouse的“Accessibility”审计，且不能只看分数——要人工核对报告里列出的具体aria-* 缺失项。