HTML5标签虽解析时不区分大小写，但必须全小写以确保兼容性、工具链支持及团队协作规范。
HTML5 标签不区分大小写，但必须全部小写 —— 这是 W3C 推荐的书写规范，也是现代前端工程实践的硬性要求。
HTML5 标签在解析时确实不区分大小写
浏览器解析 <DIV>、<div>、<DiV> 都会当作同一个元素处理。DOM 中的 nodeName 也统一返回大写（如 "DIV"），但这是内部表示，不影响标签书写。
不过，这不等于你可以随意混用大小写。真实项目中，以下情况会出问题：
- XML 解析器或 XHTML 模式下，
<DIV>会被直接报错 - 服务端模板（如 Django、Jinja2）或构建工具（如 Webpack + html-webpack-plugin）可能依赖小写标签做静态分析
- ESLint 插件
eslint-plugin-html或eslint-plugin-react默认只接受小写标签
为什么强制推荐全小写？
这不是风格偏好，而是为兼容性和可维护性让步：
立即学习“前端免费学习笔记（深入）”；
-
<MyComponent>在 Vue/React 中是自定义组件，而<mycomponent>可能被当成原生标签忽略 - 属性名如
class、data-id在 HTML 中不区分大小写，但 JS 中element.className是固定写法，混用易引发混淆 - 服务器端渲染（SSR）或静态站点生成（如 Next.js、Nuxt）通常基于标准 HTML 解析器，非小写标签可能导致 hydration 失败
容易踩的坑：自定义元素与 SVG 标签
HTML5 允许自定义元素（如 <my-button>），但它们必须包含短横线且全小写；而 SVG 标签（如 <svg>、<circle>）在 HTML 文档中也必须小写 —— 即使 SVG 规范本身允许大写，在 HTML5 上下文中仍需遵守小写约定。
常见错误示例：
<SVG width="100"> <CIRCLE cx="50" cy="50" r="20"/> </SVG>
这段代码虽能渲染，但 <SVG> 和 <CIRCLE> 不符合 HTML5 规范，会导致：
- W3C 验证器报错
Element “SVG” not allowed as child of element “body” - 某些 PWA 工具链拒绝打包
- TypeScript + JSX 中类型检查失败（如
JSX.IntrinsicElements.svg仅匹配小写svg）
实际开发中该怎么做？
把大小写当作语法的一部分来对待，而不是“浏览器能认就行”的宽容项：
- 所有原生 HTML5 标签（
<header>、<article>、<nav>等）一律小写 - 自定义元素命名使用 kebab-case，如
<user-profile>，禁止<UserProfile> - 在
<template>或框架模板中，保持与主文档一致的小写习惯 - 用 Prettier 配置
"htmlWhitespaceSensitivity": "css"+"singleQuote": true自动修正
最麻烦的不是浏览器不认，而是团队协作时有人写 <Img>、有人写 <img>、还有人写 <IMG>，结果 Git diff 里全是大小写变更，Code Review 时根本分不清哪是真逻辑改动。
