HTML工程化核心是让每行HTML经得起检查、协作和长期维护，需从首行起建立lint、规范与反馈闭环；必须配置HTMLHint的5条底线规则：doctype-first、tagname-lowercase、attr-lowercase、attr-quote-style、meta-charset-require。
HTML工程化不是加一堆构建工具，而是让每行HTML都经得起检查、协作和长期维护。核心就一条：从写第一行开始，就得有 lint、有规范、有可验证的反馈闭环。
HTMLHint 配置必须覆盖这 5 条基础规则
不配规则的 HTMLHint 等于没装。以下 doctype-first、tagname-lowercase、attr-lowercase、attr-quote-style、meta-charset-require 是底线配置，缺一不可：
-
doctype-first防止页面触发怪异模式，<!DOCTYPE html>必须是文件第一行，前面不能有任何空格或注释 -
tagname-lowercase和attr-lowercase同步解决大小写混用问题，比如<Div>或<IMG SRC="...">会被直接标红 -
attr-quote-style强制双引号，class=header或class='header'都会报错，只接受class="header" -
meta-charset-require检查<head>内是否存在<meta charset="UTF-8">，且必须在<title>之前
VS Code 中 HTMLHint 不生效？先查这三处
常见现象是安装了扩展但保存后无提示，本质是配置未加载或路径不匹配：
- 确认项目根目录存在
.htmlhintrc文件，且内容为 JSON 格式（不是 JS 导出对象） - 检查 VS Code 设置中是否启用了
html.validate.scripts和html.validate.styles，这两项默认关闭 - 如果 HTML 是通过 JS 模板字符串拼接（如 React JSX），HTMLHint 默认不扫描，需改用 ESLint +
eslint-plugin-html或@markuplint/markuplint
语义标签不是“越多越好”，而是“用对位置”
滥用 <section>、<article> 反而破坏结构，浏览器和屏幕阅读器会按真实嵌套关系解析语义层级：
立即学习“前端免费学习笔记（深入）”；
-
<main>全局只能出现一次，且不能嵌套在<header>、<footer>或<nav>内 -
<section>必须自带标题（<h2>–<h6>），否则优先用<div> -
<nav>仅包裹导航链接，搜索框、登录入口、广告位不属于导航范畴 - 标题层级必须连续，
<h1>后跟<h2>，跳到<h4>会被辅助技术忽略整段内容
alt 属性和 label 关联不是“补上就行”，而是功能级要求
缺失 alt 或 label 不是警告，是导致部分用户完全无法操作的硬性缺陷：
-
<img>的alt=""仅适用于纯装饰图；带信息的图标（如 PDF 下载按钮里的图标）必须描述动作，例如alt="下载 PDF 文档" -
<input type="text">必须通过<label for="id">显式关联，aria-label不能替代label—— 键盘用户 Tab 到输入框时，只有label能触发屏幕阅读器播报 - 动态插入的表单元素（如 JS 创建的
<select>），必须同步生成唯一id并绑定label，否则无障碍测试直接失败
真正卡住工程化落地的，往往不是工具链没搭好，而是团队对“HTML 是结构契约”这件事缺乏共识——它不渲染，也得能被解析；没人看，也得能被读取。
