HTML5注释语法未变，但应删冗余结构、保留解释意图/待办/依赖/分隔四类必要注释，缩进须匹配DOM层级，并用工具链自动化清理与审查。
HTML5 注释语法本身没变，但用法要收敛
HTML5 规范没有修改 <!-- ... --> 的语法，它和 HTML4 一样有效。所谓“HTML5 化”，其实是去掉过去为兼容旧浏览器（如 IE6–8）写的冗余注释结构，比如条件注释、嵌套注释伪装、或为了绕过解析器 bug 而加的空格/换行。现在这些全可删——现代浏览器统一按标准解析，多写反而干扰可读性。
- 不要用
<!--[if IE]>...<![endif]-->条件注释（IE 已淘汰，HTML5 不支持） - 避免在注释里塞大量说明文字，尤其是重复标签语义（如
<!-- /header -->），现代编辑器和 LSP 已能高亮配对标签 - 不写
<!-- <div> -->这类“注释掉标签”的伪代码，真要临时禁用请用hidden或 CSSdisplay: none
哪些注释仍有必要保留
真正值得留下的注释，只服务于三类人：三个月后的你自己、刚接手的同事、以及静态分析工具（如 ESLint 的 HTML 插件或 lighthouse）。重点在「解释意图」而非「描述结构」。
- 解释非显而易见的业务逻辑，例如：
<!-- 暂不启用埋点，因 AB 实验未上线 --> - 标记待办（TODO/FIXME），方便搜索：
<!-- TODO: 后续接入 SSO 登录 --> - 说明跨组件边界依赖，如：
<!-- 由 /src/components/Toast.js 动态注入 --> - 大型模板片段分隔（仅当文件超 500 行且无模块拆分时）：
<!-- === 订单结算区 === -->
注释位置与缩进必须匹配实际 DOM 结构
很多人把注释写在标签外侧却缩进错位，导致视觉层级混乱。HTML 注释不是独立节点，它属于所在层级的内容流，缩进应与紧邻的元素一致。
<main class="page">
<!-- 用户信息卡片，含头像+昵称+等级 -->
<section class="user-card">
<img src="..." alt="头像">
<h2>张三</h2>
</section>
<!-- 订单列表，每项含状态徽标 -->
<ul class="order-list">
<li>...</li>
</ul>
</main>
错误示例：<!-- 用户信息卡片 --><section>...</section>（注释顶格，<section></section> 缩进 2 空格），会误导阅读顺序。
立即学习“前端免费学习笔记（深入）”；
自动化清理比手动规范更可靠
靠人记住“什么该写、什么不该写”容易出错。建议用工具链固化规范：
- 用
prettier配置htmlWhitespaceSensitivity: "strict"自动修正注释前后空格 - 用
remark-lint+remark-html扫描并警告连续多个空行注释或超长单行注释（>120 字符） - CI 中加入
grep -n "TODO\|FIXME" src/*.html提醒及时闭环，避免注释长期滞留
最常被忽略的是注释的“生命周期”——没人定期 review 过期注释。一个上线半年的 <!-- FIXME: 修复 Safari flex 布局错位 -->，现在既不 fix 也不删，比不写还糟。
