ToolPetal
HTML formatter
Client-side only. Formatting runs in this tab. Nothing is uploaded or saved.
Tip: Ctrl/Cmd+Enter formats. Paste into the input and hit Format, or load the sample first.
When messy HTML is the bug
One-line CMS exports and minified email shells hide nesting mistakes. Indent makes parent/child tags scannable so you can spot a stray </div> before you paste into production. Example before and after with 2-space indent:
Before
<div class="card"><h2>Hello</h2><p>Hi <strong>there</strong>.</p><img src="a.png" alt=""></div>After Format
<div class="card">
<h2>Hello</h2>
<p>Hi <strong>there</strong>.</p>
<img src="a.png" alt="">
</div>Indent rules this tool uses
| Rule | Behavior |
|---|---|
| Block-ish tags | Opening tags for elements like div, section, ul, and table bump indent for children; closing tags step back. |
| Void elements | img, br, hr, meta, link, input, and similar stay on one line. No fake closing tag is invented. |
| Inline-ish tags | Short phrasing tags (span, a, strong, em, and friends) stay with surrounding text when content is short enough to keep readable. |
| script / style / pre | Inner content is treated as opaque. The formatter does not pretty-print JavaScript or CSS as HTML. |
| Comments | HTML comments are kept. They land on their own line when formatting. |
What it will not fix
- It does not validate against HTML5. Broken markup stays broken, just with different whitespace.
- It does not rewrite semantics, fix accessibility, or convert presentational tags.
- It is not Prettier with plugins. Exotic SVG, MathML, or framework template syntax may format poorly.
- Attribute order and quote style are left alone. Only spacing and line breaks change in Format mode.
- Minify is a whitespace pass, not a full HTML compressor with optional tag omission.
Paste workflow
- Paste markup from view-source, a CMS export, or a minified email shell.
- Pick 2 or 4 space indent.
- Hit Format for a readable tree, or Minify for a compact paste.
- Copy the result. Clear when you are done on a shared screen.
Pair with the Markdown to HTML converter when the source is Markdown, or the SQL formatter when the next paste is a query string.
FAQ
Does my HTML leave the browser?
No. Formatting and minify run entirely in this tab with JavaScript. ToolPetal has no upload API for your markup.
Will this validate or fix broken HTML?
No. It rearranges whitespace and indentation. Unclosed tags, wrong nesting, and invalid attributes stay as they are.
Are script and style blocks preserved?
Yes. Content inside script and style is kept as a single block so JS and CSS are not re-indented as HTML tags. Comments are kept too.
Can I minify HTML for production paste?
Yes. Use Minify to collapse whitespace between tags while leaving script, style, pre, textarea, and comments alone enough for a compact paste. Prefer Format when humans will read the markup.