免费工具 HTML 校验：找出真正会把页面弄乱的错误
粘贴整页源码或一段片段，按行列出最常把布局、无障碍和 SEO 搞坏的问题：未闭合和交叉嵌套的标签、多余的结束标签、重复 id、缺 lang / title / alt。每条都说明浏览器面对这段错误标记实际会怎么做。这是快速初查，不能代替 W3C 的 Nu Html Checker。
- 常见错误，按行列出
- 整页和片段都行
- 本地校验
校验 HTML
粘贴整页源码，或者只粘你改动的那一段。片段会跳过文档级检查（doctype、lang、title、字符编码）。改一个字结果就更新。
最多 3 MB。<script> 和 <style> 里的内容不检查。
错误
6
标记损坏或不合规。
警告
2
浏览器能显示，但通常是写错了。
元素数
56
行数
58
文档检查
doctype、页面语言、标题、字符编码、viewport。
- 错误第 2 行<html> 没有 lang 属性。WCAG 3.1.1（A 级）要求标明页面语言，读屏软件才能用正确的语言朗读。中文页面写 lang="zh-CN"。
- 通过标题：「网店打开太慢？三步提速指南 | 示例小铺」。
- 通过字符编码：UTF-8。
标记检查
按行号排列。先改前几条，一个未闭合标签常常会引出后面好几条。
- 错误第 16 行<img> logo.svg 没有 alt 属性。装饰图写 alt=""，否则写出图片内容。
- 错误第 32 行多余的 </p>：第 32 行的 <div> 出现时，浏览器已经自动关掉了 <p>（<p> 里不能放 <div>）。这个 </p> 会变成一个多出来的空段落。
- 错误第 39 行</b> 关闭 <b> 时，里面的 <i>（第 39 行）还没关。标签要按相反顺序关闭：<b><i>…</i></b>。
- 警告第 40 行<iframe> https://player.bilibili.com/player.html?bvid=BV1x… 没有 title。WCAG 技术 H64 用 title 告诉读屏用户这个框里是什么。
- 错误第 45 行</section> 关闭 <section> 时，里面的 <div>（第 43 行）还没关。标签要按相反顺序关闭：<b><i>…</i></b>。
- 错误第 47 行id「scripts」重复了（第一次在第 36 行）。页面里的 id 必须唯一，label for、# 锚点和脚本都只会找到第一个。
- 警告第 51 行<center> 在 HTML 里已经废弃。样式交给 CSS（<center> 可以用 text-align 或 margin auto）。
版本 v1.0更新于 更新记录
哪些错误真的要紧
浏览器从不拒绝显示有错的 HTML，而是按 HTML 标准里的规则把它修好。问题在于修出来的结果是不是你想要的。下面这几类，通常不是。
未闭合、交叉嵌套
少一个 </div>，页脚可能被拉进侧栏；<b><i></b></i> 会让加粗、斜体一直延续下去。先改列表里的第一条，后面几条常常是它引起的。
多余的结束标签
最典型的是段落里放了 <div>：浏览器已经提前关掉了 <p>，后面的 </p> 就变成一个多出来的空段落，页面上多一块空白。富文本编辑器里很常见。
重复 id
<label for>、# 锚点链接、ARIA 引用和 getElementById 都只会找到第一个。把同一个组件复制两遍后最容易出现。
缺 lang、title、alt
它们不是解析错误，但 lang、alt 是 WCAG 的要求，title 是 HTML 标准的要求，搜索引擎和翻译工具也都会用到。
本工具覆盖的是常见问题，不是标准里的全部规则。完整的规范校验请用 W3C 的 Nu Html Checker，本页不能代替它。HTML 是否完全合规本身不是排名因素；错误标记真正要紧的时候，是它把内容藏起来、让链接失效或影响无障碍的时候。
四步查完一段标记
适合检查网站模板、营销落地页，以及要贴进可视化建站工具或公众号编辑器的代码片段。
-
1
粘贴 HTML
整页源码（查看源代码 → 全选复制），或者只粘你改过的那一块。
-
2
从上往下改
问题按行号排列。先改第一个未闭合或交叉嵌套的标签，它往往能解释后面的好几条。
-
3
看文档检查
doctype、lang、title、字符编码只对整页检查。
-
4
再粘一次，然后用 W3C 校验
这里的列表清空之后，再用 Nu Html Checker 查其余的规则。
查什么，依据哪条规则
工具先用一个小型解析器读你的 HTML，常见情形按 WHATWG HTML 的解析规则处理：空元素、可省略的结束标签、script 和 style 里的原始文本；然后做下面这些检查。
- 可以省略结束标签的元素（p、li、dt、dd、option、tr、td、th、thead、tbody、html、head、body）缺结束标签时不报，标准允许它们自动关闭
- 自闭合写法
<div/>用在非空 HTML 元素上是解析错误，放在<svg>、<math>里则可以 - id 必须唯一、至少一个字符、不含空白（WHATWG §3.2.6）
- 不查：每个元素完整的内容模型、属性值语法、ARIA 规则、表格结构算法和 CSS——这些交给 Nu Html Checker
| 写法 | 结论 | 浏览器实际怎么做 |
|---|---|---|
<p>文字<div>方框</div></p> | 多余的 </p> | 在 <div> 前关掉 <p>，再补一个空 <p> |
<b><i>提示</b></i> | 交叉嵌套 | 提前关掉 <i>，再为后面的文字重新打开它 |
<div class="card">…（没有 </div>） | 未闭合 | 后面的内容全在这个卡片里 |
<div/> | 非空元素自闭合 | 当成没有结束的 <div> |
<br></br> | 空元素写了结束标签 | 把 </br> 当成又一个 <br> |
| 两个 id="price" | 重复 id | getElementById 只找到第一个 |
默认示例查出来什么
默认内容是一篇 58 行的网店运营笔记源码。在浏览器里看着一切正常，却有 6 个错误、2 个警告。
| 行号 | 问题 | 改法 |
|---|---|---|
| 2 | 错误：<html> 没有 lang | <html lang="zh-CN"> |
| 16 | 错误：logo 的 <img> 没有 alt | alt="示例小铺首页" |
| 32 | 错误：<p> 里放了 <div>，后面的 </p> 多余 | 在 <div> 前结束 <p>，或者都用 <div> |
| 39 | 错误：<b><i>…</b></i> 交叉嵌套 | <b><i>…</i></b> |
| 40 | 警告：<iframe> 没有 title | title="视频：页面提速技巧" |
| 45 | 错误：第 43 行的 <div class="comment"> 在 </section> 前没关 | 补上 </div> |
| 47 | 错误：id「scripts」在第 36 行已经用过 | 改掉其中一个 |
| 51 | 警告：已废弃的 <center> | <p style="text-align:center"> |
同一段源码粘到 H 标签检测、网页链接提取、图片 alt 检查里，还能看到这个页面的其它问题：标题跳级、没有文字的图片链接、堆关键词的 alt。
错误标记通常从哪来
手写的页面反而很少出问题，大多数错误来自复制粘贴、模板拼装和各种编辑器。
同一个组件复制两遍
重复 id、重复属性多半来自把同一块代码、表单或客服 / 统计组件粘贴了两次。每个实例的 id 要不同。
编辑器的 HTML 混进模板
富文本编辑器会用 <p> 包住内容，在里面插 <div> 或表格，就会产生多余的 </p> 和空段落。从公众号编辑器、Word 复制过来的内容尤其常见。
在 HTML 里沿用 XHTML 习惯
<div/>、<span/> 在 HTML 里不会自闭合，元素一直开着，把后面的内容都吞进去。
把「能显示」当成「没问题」
浏览器几乎什么都能修好，但修复的结果可能挪动了内容、弄坏了锚点，或者让读屏软件读不到文字。
看错误标记在真实访客那里造成了什么
校验工具检查代码；TapCub 在线上网站里看后果：脚本报错、死链，以及被放弃的页面。
怎么在线校验 HTML？
把整页源码或一段片段粘到上面的输入框，错误和警告会带着行号从上往下列出。要做完整的规范校验，之后再用 W3C Nu Html Checker 查一遍。
怎么找出 HTML 里没闭合的标签？
粘到这里：每个一直没关闭的元素都会列出它在第几行打开，每个关错了元素的结束标签会在出现的那一行报出来。<p>、<li> 这类结束标签可以省略的元素不会报。
和 W3C 校验器一样吗？
不一样。本工具快速检查最常见、危害最大的问题，并解释原因；W3C 的 Nu Html Checker（validator.w3.org/nu）按完整规范检查，是按规范逐条检查的参照，最后用它把关。
HTML 不合规会影响 SEO 吗？
HTML 完全合规本身不是排名因素，几乎没有网站能做到零错误。要紧的是错误改变了搜索引擎和访客看到的东西：内容被未闭合标签吞掉、链接不是真正的链接、缺了 title。
为什么 <div/> 算错误？
在 HTML 里，结尾的斜杠不会关闭非空元素，会被直接忽略。<div/> 打开了一个一直不关的 div，后面的内容都跑进去了。<br/>、<img/> 这类空元素和 SVG 里可以这样写。
我明明写了 </p>，为什么说它多余？
<p> 里不能放 <div>、<ul>、<table> 这类块级元素。遇到它们时浏览器会先结束段落，后面的 </p> 没有东西可关，就变成了一个空段落。富文本编辑器里插入表格、分栏时最常见。
能检查 JavaScript 和 CSS 吗？
不能，<script> 和 <style> 里的内容会跳过。CSS、JavaScript 的体积可以用代码压缩工具处理；语法检查请用 ESLint、Stylelint 这类专门的工具。
粘贴的 HTML 会上传吗？
不会。HTML 在你的浏览器里解析，不会发给 TapCub，也不会发给 W3C。