HTML标签须严格闭合，自闭合标签统一写为<img />形式；优先使用语义化标签如<header><nav><main>；属性值必须加引号，布尔属性需显式赋值；表格与列表嵌套须符合规范，禁止非法子元素。
HTML标签必须成对闭合，自闭合标签要加斜杠
浏览器对缺失闭合标签的容忍度高，但不意味着可以随意省略。比如 <p>文本</p> 漏掉 </p>，后续块级元素可能被意外包裹进该段落中；<img src="a.jpg"> 在 HTML5 中虽可不写斜杠，但混用 <img src="a.jpg" /> 会导致 XHTML 兼容性问题或某些构建工具报错。
实际建议：
- 所有双标签（如
<div>、<section>、<p>）必须显式写出结束标签 - 自闭合标签（
<img>、<input>、<br>、<hr>）统一写成<img src="x" />形式（注意空格+斜杠），避免在 XML 或 SSR 渲染中出错 - 不要依赖浏览器自动修复——它只按“怪异模式”补全，结果不可控
语义化标签优先于 <div> 和 <span>
用 <div> 套一切是早期惯性，但现代 HTML 要求结构可读、可访问、可索引。<header> 不只是“上面那块”，它代表页面或区块的头部元信息；<nav> 明确告诉屏幕阅读器这是导航区域；<main> 是唯一主内容容器，一个页面只能有一个。
常见误用场景：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 把登录表单放在
<aside>里——<aside>应用于附属、非主线内容（如侧边栏广告、相关链接） - 用多个
<div class="card">替代<article>包裹独立内容项（如博客列表） -
<h1>到<h6>必须体现层级，不能只为样式而跳级（如<h2>后直接<h4>）
属性值必须加引号，布尔属性要显式赋值
虽然 class=header 在部分浏览器能解析，但一旦值含空格或特殊字符（如 class=btn btn-primary），不加引号就直接失效。更隐蔽的问题是：某些构建工具（如 Webpack + html-loader）或 Linter（如 eslint-plugin-html）会直接报错。
布尔属性（disabled、required、checked）也容易踩坑：
-
<input required>合法，但语义模糊；推荐写成<input required="required">或<input required=""> -
<input disabled="false">并不会启用控件——只要存在该属性，即为 true；要取消禁用，必须彻底移除disabled属性 - 自定义属性一律用
data-前缀，如data-id="123"，不可写id="123"代替业务标识
嵌套规则不能违反，尤其注意表格和列表
HTML 有严格的嵌套语法约束，不是“能渲染出来就行”。最常破戒的是表格：<table> 内只能是 <caption>、<colgroup>、<thead>、<tfoot>、<tbody>、<tr>；<tr> 下只能是 <th> 或 <td>。把 <div> 直接塞进 <tr>，浏览器会自动“修复”成 <tr><td><div>...</div></td></tr>，但 DOM 结构已失控。
列表同理：
-
<ul>或<ol>下只能直接跟<li>，中间插<p>或<div>会被浏览器移到列表外 -
<li>内可嵌任意流内容，但若需多段文字，优先用<p>而非连续换行（<br>） - 避免
<div><ul><li></li></ul></div>这类“套娃式”无意义包裹，除非真有布局或样式隔离需求
格式规范不是为了取悦校验器，而是让 DOM 树稳定、协作时少猜意图、无障碍支持不掉链子。最易被忽略的是嵌套合法性——它不出错、不报警，却会在 SSR、服务端渲染或自动化测试中突然暴露为结构错乱。
