标准化是让每个html标签、属性和结构承担明确职责，否则会导致样式错乱、seo降权、读屏障碍及测试失败；必须强制校验doctype、lang、charset等基础规范，语义化标签须严格按行为契约使用，htmlhint需裁剪规则以适配工程实际，class命名与嵌套深度影响长期可维护性。
标准化不是加一堆检查规则就完事，而是让每个标签、每行属性、每个文件结构都承担明确职责——不按标准写，轻则样式错乱、SEO掉权，重则屏幕阅读器读不出导航，测试环境里根本跑不通。
HTML文档结构必须强制校验
很多问题其实从第一行就埋下了：缺少 或位置不对，浏览器会进怪异模式；<code> 漏掉 lang 属性，NVDA 读屏直接跳过整页；<meta charset="utf-8"> 没放 最前面，中文字符在部分旧版 Edge 里直接变方块。
必须是文件首行，且不能有任何空格或注释前置-
lang值必须严格匹配 BCP 47，zh或zh_CN都算错，只认zh-CN -
<meta charset="utf-8">要紧贴开始，早于<title></title>和任何<link>
语义化标签不能当 div 别名用
<header></header> 不是“顶部区域”，<nav></nav> 不是“有链接的地方”——它们各自带行为契约。把登录按钮塞进 <nav></nav>，会让屏幕阅读器误判为导航项；在 <main></main> 外套 <section></section>，SEO 权重会被稀释；用 <div class="card"> 而不用 <code><article></article>，等于主动放弃内容可提取性。
-
<main></main>在整个页面中必须唯一，且不能嵌套在<article></article>、<aside></aside>、<footer></footer>内部 -
<nav></nav>只包裹真正用于页面跳转的链接集合，面包屑、页脚友情链接可各自独立用一个<nav></nav> -
<section></section>要有主题，且通常配<h2></h2>～<h6></h6>；纯样式分组请回退到<div> <h3>HTMLHint 配置要关掉“看起来合理”的规则</h3> <p>开箱即用的 <code>htmlhint默认启用 40+ 规则，但其中不少和工程化目标冲突：比如attr-lowercase看似规范，却会把 Vue 模板里的v-if、@click当成错误；id-class-value强制 class 值小写，但 BEM 的user__profile--active里双连字符就是合法命名。- 必须保留的硬性规则：
doctype-first、meta-charset-require、alt-require、tag-pair - 建议关闭的规则：
attr-lowercase（除非纯静态页）、id-class-ad-disabled（BEM 场景下失效） - VS Code 中需确认
"html.validate.scripts": true已启用，否则 JS 内联模板里的 HTML 片段不会被扫描
class 命名和嵌套深度直接影响维护成本
写
<div class="box box--red"> 看似省事，但三个月后没人记得 <code>box--red是指警告框还是按钮状态；缩进用 Tab 混合空格，Git diff 里一眼看不出哪层漏了闭合标签；<div><div><div> <p> 套四层才出文字，CSS 选择器一写就是 <code>.page .content .list .item p，改个间距得翻三页代码。- class 名强制
kebab-case，禁用驼峰和下划线：search-input✅，searchInput❌，search_input❌ - 单个块级元素独占一行，兄弟元素缩进一致，嵌套不超过 4 层（
<main><section><article><header></header></article></section></main>已到顶） - 布尔属性必须显式写出值：
<input required="required">，而不是<input required>（后者在某些 SSR 场景下会被忽略）
真正的工程化卡点不在工具链多炫酷，而在每个
<header></header>是否真承载页眉逻辑、每个lang是否精确到地区、每次提交前有没有人手动删掉那行多余的<div class="wrapper">——这些细节堆起来，才是代码能活过两年的关键。</div> - 必须保留的硬性规则：
