HTML语义化是DOM层面的契约，需通过工具链强制校验：每页仅一个<main>、标题层级不可跳级、<img>必须含alt（非装饰图），CI中集成axe-core或nu HTML checker阻断不合规发布。
HTML代码质量不是“写完能跑就行”的副产品，而是需要主动设计、持续校验、工具兜底的系统性工程。光靠人工 review 或凭经验写语义标签，根本挡不住多人协作、快速迭代带来的结构退化。
HTML语义化不是选题作文，是 DOM 层面的契约
语义化不是为了“看起来更高级”，而是让浏览器、屏幕阅读器、爬虫、甚至后续的 JS 逻辑，都能基于 <header>、<nav>、<main> 这些标签做出确定性判断。一旦用 <div class="header"> 替代 <header>，所有依赖原生语义的自动化工具（比如 Lighthouse 的无障碍审计、SEO 工具的结构提取）就立刻失效。
- 关键检查点：每个页面必须有且仅有一个
<main>；<h1>到<h6>必须形成逻辑层级，不能跳级或重复 - 常见错误：
<div role="button">却没处理键盘Enter/Space事件；<img>缺失alt且非装饰图 - 落地建议：在 CI 流程中接入 nu HTML checker 或
axe-coreCLI，对构建产物做静态结构扫描，失败即阻断发布
HTML数据治理：从“能渲染”到“可信赖”
前端输出的 HTML 是下游数据消费（如 SEO 爬取、BI 埋点、RPA 抓取）的唯一信源。如果 DOM 结构随需求变更频繁抖动——比如把商品价格从 <span class="price"> 换成 <div data-price>，所有依赖该路径的外部系统就会断裂。
- 必须定义稳定选择器：对关键业务字段（价格、标题、状态），约定使用
data-*属性而非 class 名，例如data-product-price - 避免“class 泛滥”：禁止用 class 控制逻辑分支（如
class="is-loaded"），改用data-loaded="true"，防止样式重构误伤数据提取 - 自动化校验：用 Puppeteer 启动真实浏览器，执行
document.querySelector('[data-product-price]')并断言存在性与非空，集成进 nightly build
HTML与构建流程强绑定，而非开发后补救
ESLint 对 JS 有效，但对 HTML 几乎无能为力——它不理解 <template> 里的结构，也管不了 Vue/React 组件编译后的最终 DOM。HTML 质量必须在构建链路里卡点。
立即学习“前端免费学习笔记（深入）”；
- Webpack/Vite 插件介入：使用
html-webpack-plugin的preprocessHtml钩子，在注入模板前校验<meta name="viewport">是否存在且合法 - SSR 场景特别注意：服务端渲染出的 HTML 必须通过
DOMParser解析后再序列化一次，避免因模板引擎转义导致的标签闭合错误（如未闭合的<meta>影响整个文档解析） - 警惕“框架黑盒”：React 的
dangerouslySetInnerHTML、Vue 的v-html是 HTML 质量漏洞高发区，必须配套白名单过滤（如只允许<strong><em>），禁用<script>和onerror类属性
真正难的不是写出合规的 HTML，而是在需求压测、工期压缩、多人并行时，守住那条 DOM 结构的底线——它没法靠“提醒”维持，只能靠构建时的机器校验和不可绕过的发布门禁来兑现。
