HTML不是编程语言，其规范性关乎渲染、SEO与可维护性；lang属性必须设于<html>标签且符合BCP 47标准，charset需置于<head>最前，容器元素应显式闭合，data-属性用于业务数据而非class，细节决定工程质量。
HTML 不是编程语言，没有“运行错误”，但写得不规范会导致渲染异常、SEO 失效、可维护性崩塌——关键不在“会不会写”，而在“是否按浏览器和协作场景的真实规则来写”。
为什么 <html> 标签里必须有 lang 属性
缺 lang 不影响页面显示，但会触发无障碍访问（a11y）工具警告，搜索引擎也可能降低内容可信度。屏幕阅读器依赖它切换语音引擎，中文站点必须设为 lang="zh-CN" 或 lang="zh-Hans"（简体）/ lang="zh-Hant"（繁体）。
-
lang应该写在最外层<html>标签上，不是<body>或某个 div - 若页面含多语言区块（如英文引用），可用局部
lang="en"覆盖，但主语言不可省略 - 别写成
lang="ch"或lang="cn"—— 这些不是合法 BCP 47 标签，浏览器会忽略
<meta charset> 必须放在 <head> 最前面
如果 <meta charset="UTF-8"> 出现在 <title> 或其他标签之后，部分浏览器（尤其是旧版 IE 和某些移动端 WebView）会在解析到它之前用默认编码（如 ISO-8859-1）解码前面的内容，导致标题乱码、CSS/JS 路径解析失败。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>正确：charset 在 head 顶部</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body></body> </html>
- 不要写
charset= utf-8（带空格）或charset=UTF8（缺横线）——只有UTF-8是标准写法 - 服务端已通过 HTTP Header 发送
Content-Type: text/html; charset=utf-8，仍需保留该 meta 标签：Header 可能被代理覆盖，meta 是最终兜底
哪些 HTML 元素必须闭合，哪些可以省略
HTML5 允许部分标签省略结束符，但省略 ≠ 推荐。混淆会导致嵌套错乱，尤其在动态插入内容时。
立即学习“前端免费学习笔记（深入）”；
- 必须显式闭合：
<div>、<p>、<section>、<article>、<span>等所有“容器型”元素 - 可省略但建议写全：
<li>、<dt>、<dd>（浏览器自动补，但 IDE 和 linter 常报 warning） - 自闭合标签不能加
/>：写<img src="x">合法；写<img src="x" />虽不报错，但在 XHTML 模式下才需要，现代 HTML5 中多余且易引发模板引擎误解 -
<script>和<style>标签永远不能自闭合：即使没内容，也必须写<script></script>
用 class 还是 data- 存业务逻辑数据
把 ID、状态、配置塞进 class 名（如 class="btn btn--primary is-loading data-id-123"）是常见反模式：class 是样式契约，不是数据容器，CSS 选择器无法可靠提取结构化值，且易与 BEM 命名冲突。
- 业务元数据一律走
data-属性：data-user-id="123"、data-status="pending" - 避免
data属性值含空格或引号，否则需转义；推荐只用字母、数字、短横线 - JavaScript 读取时统一用
element.dataset.userId（驼峰自动转换），而非getAttribute('data-user-id') - 不要用
data-存大量 JSON 字符串——应走内联<script type="application/json">或 API 加载
真正难的不是写出能渲染的 HTML，而是让同一份代码在 Chrome DevTools 的 Elements 面板里不飘红、被 Lighthouse 打出 90+、被后端模板或前端框架安全接收、被新同事一眼看懂结构意图——这些都藏在看似“无所谓”的空格、换行、属性顺序和大小写里。
