HTML标签名必须全小写且拼写准确，因HTML5规范强制要求、W3C验证器报错、SSR/静态生成器可能拒绝解析；大写如DIV或拼错如inputt均不合法。
标签名必须全小写，且不能拼错
浏览器对大小写不敏感，但HTML标准强制要求小写，否则W3C验证器会报错，服务端渲染或某些静态站点生成器也可能直接拒绝解析。常见错误包括：Div、INPUT、ImG——这些都不是合法标签名；inputt（多打一个t）、texarea（少个a）属于典型拼写错误，会导致元素被忽略或降级为div。
验证方式很简单：把代码粘贴到 W3C Markup Validation Service，它会明确标出类似 Element inputt is not supported 的提示。编辑器里装 HTMLHint 或启用内置LSP校验，输入时就能实时看到下划线警告。
属性名小写 + 属性值必须用双引号包裹
属性名如 class、id、src、href、alt 全部小写，Class、HREF、ALt 都是错的。属性值必须用双引号，哪怕值是纯数字或单个单词——width=100 和 type=checkbox 看似能运行，但不符合规范，验证器会报 Attribute value must be quoted。
布尔属性如 required、disabled 可以不写值，但显式写出更稳妥：required="required" 兼容性更好，尤其在旧版IE或某些XML解析场景下不会被跳过。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
class="header active"✅ 正确，多个类名空格分隔 -
class=header❌ 缺引号，验证失败 -
CLASS="header"❌ 属性名大写，非标准 -
data-user-id=123❌ 引号缺失，且自定义属性也须小写
img、form、a 等关键标签有硬性属性要求
不是所有属性都可选。img 必须带 src 和 alt；form 必须有 action（哪怕为空字符串 action=""）；a 有 href 才是有效链接，否则只是普通内联容器。
漏掉 alt 不仅通不过验证，还会让屏幕阅读器用户完全不知道图像是什么，SEO权重也会受损。空 alt="" 是允许的（表示装饰性图片），但不能省略这个属性本身。
-
<img src="logo.png">❌ 缺alt，W3C报错 -
<img src="logo.png" alt="公司Logo">✅ 合规 -
<form>❌ 缺action，验证器提示The form element is missing a required attribute: action -
<a>点击这里</a>❌ 没href，无法触发默认链接行为，也不符合语义
嵌套与自闭合标签不能随意省略结束符
HTML5 允许部分标签省略结束标签（如 p、li、tr），但前提是结构清晰、无歧义。而 div、section、article 这类块级容器必须成对出现；img、br、input 是自闭合标签，写成 <img> 或 <img /> 都可以，但不能写成 <img></img>。
容易踩坑的是 p 标签：它不能包含块级元素，所以 <p><div>内容</div></p> 是非法嵌套，浏览器会自动修正为两个分离的段落，导致样式错乱。
最稳妥的做法是：所有双标签显式写闭合符，自闭合标签统一用 <tagname /> 或无斜杠形式（推荐前者，和XML/XHTML兼容），避免依赖浏览器“自动修复”逻辑——那不是规范，只是容错。
