HTML不规范会导致运行时崩溃、SEO降权、读屏失效；常见问题包括id大小写敏感、标签未闭合（如<p>遇<div>自动结束）、属性值未加引号、语义标签误用、img缺alt、自定义元素命名违规及data-属性拼写错误。
规范化 HTML 不是“写得漂亮点”的加分项，而是避免运行时崩溃、SEO 掉权、读屏失效的底线要求——不规范的代码，浏览器可能勉强渲染，但 JS hydration 会失败、Lighthouse 直接扣分、爬虫跳过关键内容。
为什么 document.getElementById 找不到元素
常见错误不是 JS 写错了，而是 HTML 结构本身不合法：
-
<div id="header"></div>和<DIV ID="HEADER"></DIV>在某些旧环境或工具链中会被视为不同标识（HTML5 不区分大小写，但部分构建工具、校验器、服务端模板引擎会敏感） - 未闭合标签，比如
<p>文字<div>嵌套</div>——<p>是自动闭合标签，<div>一出现，<p>就被强制结束，后续 DOM 结构和你写的完全对不上 - 属性值没加引号：
<img src=logo.png alt=logo>在含空格或特殊字符时直接解析失败，且 W3C 验证不通过
语义化标签怎么影响 aria-label 和读屏软件
读屏软件不靠 CSS 类名或 JS 注入识别结构，它只信任原生语义：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
<div role="navigation">而不是<nav>，某些读屏器（如 NVDA 2025+）会降级处理，跳过导航区域快捷键 -
<button>自带键盘焦点、空格/回车触发行为；<div onclick>没有tabindex、不响应键盘事件、不被aria-pressed正确识别 -
<img>缺少alt属性，不仅 SEO 权重下降，还会被读屏器读成“图片”，用户完全不知道内容
Hydration failed 错误到底在报什么
这是 SSR/SSG 应用中最典型的 HTML 规范断裂后果：
立即学习“前端免费学习笔记（深入）”；
- 服务端渲染出的 HTML 有未闭合的
<li>或多出的</p>，客户端 React/Vue 会按标准 HTML 解析，DOM 树结构和服务端输出不一致 → 直接抛Hydration failed because the initial UI does not match what was rendered on the server - 自定义元素命名违规：写成
<mybutton>而非<my-button>，浏览器忽略该标签，服务端渲染出的内容在客户端变成<mybutton></mybutton>（空节点），hydration 失败 -
data-属性拼错成data_api_key或api-key，HTML 验证失败，部分 SSR 框架（如 Next.js 14+）在严格模式下拒绝 hydrate
真正难的不是写出能跑的 HTML，而是写出浏览器不纠错、机器不猜意图、人一眼能看懂嵌套关系的 HTML——一个没闭合的 <section>，可能让整页 SEO 掉 30% 流量，而你根本收不到错误提示。
