HTML Formatter & Beautifier
Indent minified or messy HTML into readable markup, keeping inline elements with their text and leaving pre, script and style untouched.
<div class="card">
<h2>Title</h2><p>Some <em>text</em> here.</p>
</div>
Output is valid and updates as you type.
Fix the highlighted fields to update the output.
Paste minified or tangled HTML and get it back indented. Inline elements stay on the line with their text, because breaking them adds word gaps that were not there before.
How to use
- Paste the markup. Page source, a minified fragment, or something an email tool produced all work.
- Pick the indent your project uses.
- Read the result. Indentation makes an unclosed tag obvious, which is usually why you are formatting in the first place.
- Copy it into your editor.
- Keep in mind that formatting inserts newlines. In HTML those are whitespace, and whitespace between inline elements renders.
Example
<div class="card"><h2>Title</h2><p>Some <em>text</em> here.</p></div>becomes
<div class="card">
<h2>Title</h2>
<p>Some <em>text</em> here.</p>
</div>The em stays on its line with the surrounding words. Putting it on a line of its own would add a space either side of “text”.
Pitfalls
- Formatting adds whitespace, and whitespace between inline elements is a visible word gap. That is why headings, paragraphs and inline tags are kept on one line here.
preandtextarearender whitespace exactly. Their contents are copied through untouched.- Void elements have no closing tag. Indenting after
<br>or<img>as if they did is a common formatter bug and produces markup that drifts to the right. - HTML is forgiving about unclosed tags; a formatter is not. If the output drifts sideways, look for a tag that was never closed.
- Formatting a page with
display: inline-blocklayout can change the rendering, because the newlines become spaces between the boxes. - Template syntax such as Handlebars or Blade is not HTML. Formatting a template may move a tag across a control structure.
- Formatting minified HTML does not recover the original template, only the shape of the output.
- Attribute order and quoting are left as written. Nothing is normalised.
Compatibility
The output is ordinary HTML5 and renders the same as the input in every browser, with the whitespace caveats above. Void elements follow the HTML living standard list, and pre, textarea, script and style are treated as raw text elements. The tool runs entirely in your browser and handles documents up to 100,000 characters.
Frequently asked questions
Will formatting change how my page renders?
Why is my paragraph all on one line?
Does it fix unclosed tags?
Can I format a PHP or Blade template?
Does it touch my script contents?
script and style bodies are copied through untouched.