HTML标签名必须全部小写，因HTML5规范强制要求、工具链默认适配、SSR/XHTML/JSX等场景严格校验；大写虽浏览器可解析，但易在构建、校验、渲染环节出错。
HTML标签名本身不区分大小写，但必须全部小写才符合规范、能通过现代工具链校验、避免在SSR/XHTML/JSX等场景中出错。
浏览器为什么能解析却要写
HTML解析器会把
、、都转成同一个元素节点，这是历史兼容性设计。但HTML5规范第12.1.1节明确要求：“标签名必须由ASCII小写字母组成”。这意味着：
-
<SCRIPT>在纯HTML页面里能执行，但在Next.js SSR模式下可能被拒绝或降级为字符串
-
<IMG src="a.jpg">会被Prettier自动转成<img src="a.jpg">，反复提交导致无意义diff
- VS Code的html-validate插件默认报错
<TABLE>，即使它渲染正常
- 复制PDF里的HTML片段常带大写标签，CI流水线里
html-validate直接失败
哪些地方会悄悄报错而不是“看起来没问题”
大小写问题最危险的时候是“页面照常显示，但某天突然崩掉”：
- 服务端渲染（如Nuxt）开启严格模式时，
<HEADER>可能被当作文本而非元素节点
- SVG内联时用
<path>正常，但<PATH>在部分Safari版本中不渲染
- JSX里写
<INPUT>会被React当成自定义组件，触发React.createElement: type is invalid
- XML解析器（读取RSS、处理SVG文件）遇到
<link>写成<LINK>直接抛错
属性名和class/id值的大小写规则不同
属性名（如class、id、data-id）本身不区分大小写，但必须小写才能通过工具链：
立即学习“前端免费学习笔记（深入）”；
-
CLASS="x"浏览器认，但html-validate报warning，eslint-plugin-html强制修复
-
for属性写成For会导致部分屏幕阅读器无法关联<label>和控件
-
class和id的值是大小写敏感的：CSS里.Btn和.btn完全无关
- 推荐用kebab-case：
data-user-id比dataUserId更稳妥，避免与JSX驼峰冲突
真正麻烦的不是“能不能运行”，而是“什么时候在哪条链路上突然失效”——编辑器不提醒、本地跑得通、测试没覆盖、上线后某个构建步骤或辅助技术直接卡住。把prettier和html-validate加进CI，比靠人眼盯大小写可靠得多。
HTML解析器会把
、
、
都转成同一个元素节点，这是历史兼容性设计。但HTML5规范第12.1.1节明确要求：“标签名必须由ASCII小写字母组成”。这意味着：
-
<SCRIPT>在纯HTML页面里能执行，但在Next.js SSR模式下可能被拒绝或降级为字符串 -
<IMG src="a.jpg">会被Prettier自动转成<img src="a.jpg">，反复提交导致无意义diff - VS Code的html-validate插件默认报错
<TABLE>，即使它渲染正常 - 复制PDF里的HTML片段常带大写标签，CI流水线里
html-validate直接失败
哪些地方会悄悄报错而不是“看起来没问题”
大小写问题最危险的时候是“页面照常显示，但某天突然崩掉”：
- 服务端渲染（如Nuxt）开启严格模式时，
<HEADER>可能被当作文本而非元素节点 - SVG内联时用
<path>正常，但<PATH>在部分Safari版本中不渲染 - JSX里写
<INPUT>会被React当成自定义组件，触发React.createElement: type is invalid - XML解析器（读取RSS、处理SVG文件）遇到
<link>写成<LINK>直接抛错
属性名和class/id值的大小写规则不同
属性名（如class、id、data-id）本身不区分大小写，但必须小写才能通过工具链：
立即学习“前端免费学习笔记（深入）”；
-
CLASS="x"浏览器认，但html-validate报warning，eslint-plugin-html强制修复 -
for属性写成For会导致部分屏幕阅读器无法关联<label>和控件 -
class和id的值是大小写敏感的：CSS里.Btn和.btn完全无关 - 推荐用kebab-case：
data-user-id比dataUserId更稳妥，避免与JSX驼峰冲突
真正麻烦的不是“能不能运行”，而是“什么时候在哪条链路上突然失效”——编辑器不提醒、本地跑得通、测试没覆盖、上线后某个构建步骤或辅助技术直接卡住。把prettier和html-validate加进CI，比靠人眼盯大小写可靠得多。
