HTML Formatter
One input per line. Output is numbered to match the input order.
Pinned tools are listed in your favourites on the home page.Copies a link to this tool that carries your current input, so it opens ready to run.Gives you an iframe snippet for putting this tool on your own site.
Ctrl+Enter Run · Ctrl+Shift+C Copy · Esc Clear
Understand HTML Formatter
这个格式化工具按嵌套深度缩进 HTML，也能把它压成一行并去掉注释。
How it works
标记会被切分为标签、注释和文本段，遇到开始标签时缩进层级上升，遇到结束标签时下降。空元素（br、img、input、meta、link）从不开启新层级，因为它们没有需要闭合的东西；而行内元素（a、span、strong、code 等）被刻意保持在同一层，好让一句话不至于被拆成一行一个词。压缩则相反：注释被移除，标签之间的空白被折叠。
When to use it
- 阅读被压缩过、或由构建工具产出的页面源码。
- 理清嵌套的组件或邮件模板，找出哪个 div 没有闭合。
- 清理从所见即所得编辑器或 CMS 字段中粘贴出来的标记。
- 在把片段粘进模板之前先检查它的结构。
Watch out for
- 行内元素之间的空白是要渲染出来的。把 </span> <span> 折叠成 </span><span> 会去掉一个读者看得见的空格，因此压缩后的输出并不总是视觉上完全一致。
- 这是一次文本处理，不是 HTML 解析。script、style、pre 和 textarea 内部的内容会被当作普通标记对待，因此美化一个页面会把代码示例和预格式化文本重新缩进，而那里的空格是有意义的。
- 压缩会移除每一条注释，包括邮件模板为兼容旧版 Outlook 而依赖的条件注释，以及你工具链要读取的任何标记注释。
- 标签不配对时得到的是奇怪的缩进，而不是报错——输出如果一路稳定地向右推移，通常意味着某个标签始终没有闭合。
Not the right tool for: 为生产环境压缩 HTML。构建期的压缩器会解析文档，知道哪些空白可以安全移除；请在流水线里做这件事，而不是靠粘贴。
Frequently Asked Questions
可以只格式化一段片段，而不是完整文档吗？
可以——粘贴任意片段（一个 div、一段模板，甚至单个元素）。格式化工具并不要求存在完整的 DOCTYPE/html/head/body 结构。
它能处理 Jinja/Handlebars/Mustache 模板吗？
模板语法（{{ }}、{% %}、{{{ }}}）会原样保留，因为格式化工具把它当作文本内容。模板标记周围的 HTML 结构会被正常格式化。
HTML 压缩和 gzip 有什么区别？
压缩会从源 HTML 中去掉注释、空白和可省略的闭合标签，通常能省下 5–15%。gzip 会在压缩后的输出上进一步压缩（通常再减少 60–80%）。生产环境两者都该用——先压缩，再由服务器做 gzip。
How to Use HTML Formatter
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.