HTML Formatter

Beautify and format HTML markup.

About the HTML Formatter

Paste minified or badly indented HTML and get a readable document back. Inline script and style blocks are reformatted with their own JavaScript and CSS rules rather than treated as opaque text, pre and textarea content is preserved exactly, and lines are never hard-wrapped at a column. Formatting runs in your browser, so a page holding customer data or an API key is not uploaded anywhere.

How to use the HTML Formatter

  1. Paste your HTML into the input panel, or press Sample to load an example.
  2. Pick 2 spaces or 4 spaces from the Indent selector.
  3. Press Beautify to indent the document.
  4. Press Copy for the clipboard, or Download to save formatted.html.

Frequently asked questions

Does it fix unclosed tags?
No, and it does not warn you either. <div><p>hi</div> comes back as <div>, an indented <p>hi, then </div>, with the missing closing tag neither added nor reported. This is a formatter rather than a validator, so run the markup through the W3C validator when correctness is the question.
What happens to inline scripts and styles?
Both are reformatted rather than left alone. A script holding var a=1;function f(){return 2} comes back with spaces around the equals sign, a blank line before the function and an indented body, and a style block gets one declaration per line. Keep those blocks in external files when the bytes have to stay untouched.
Why are br and img not moved onto their own lines?
Void elements are treated as inline, so <div><br><img src="a.png"><input type="text"></div> stays on one line. That is deliberate: breaking inline elements apart introduces rendered whitespace that can shift the layout.
Are long lines wrapped?
No. Wrapping is off, so an element carrying many attributes and a long run of text both keep their full length on one line. Existing line breaks are preserved, though a run of blank lines is collapsed to at most two.
Why did nothing happen to my input?
Text containing no markup is returned unchanged rather than rejected, so pasting plain prose looks like a no-op. Check that you pasted the page source rather than the rendered text copied from a browser window.

Related tools