HTML Formatter, Indent and Beautify HTML, Private

About the HTML Formatter

The HTML Formatter takes HTML that is squeezed onto one line, copied from a page source or written without a consistent style, and indents it so the structure is easy to read. Paste your HTML into HTML and the formatted version appears next to it as you type. Choose 2 spaces, 4 spaces or Tab for the indent, then copy the result or press Download .html.

Your HTML never leaves your device. The formatting code runs in the page, so nothing is uploaded, logged or stored, and it is gone when you close the tab. The formatting code itself is only downloaded the first time you type something, so the page stays light until you use it.

How to use it

Only whitespace changes

The formatter never adds, removes, renames or reorders anything except spaces and line breaks. If you remove every whitespace character from the input and from the output, the two strings are identical; the test suite checks this on a large set of documents, so a formatting bug cannot silently drop a tag or a word. Attribute values, entities such as & and  , and the case of tag names are kept exactly as you wrote them.

What stays exactly as written

Some content is whitespace-sensitive, so the formatter copies it without touching it:

• pre blocks, where line breaks and spaces are the content.
• textarea, where the text is the field's default value.
• script and style, which hold code in another language.
• title, which holds plain text.

Text elsewhere has runs of spaces and line breaks collapsed to a single space, the same way a browser does when it draws the page. A non-breaking space (  or the character itself) is not collapsed.

Block and inline elements

Block elements such as div, ul, section and table each start on their own line, and their children are indented one level. Inline elements such as a, b, span and em stay with the text around them, so <p>Hello <b>world</b>!</p> is not broken into four lines that would add visible gaps. Void elements such as br, img and input do not add a level of indent.

Worked example

Input:

<ul><li>a</li><li>b</li></ul>

With two spaces the result is:

<ul>
  <li>a</li>
  <li>b</li>
</ul>

The note reads Formatted into 4 lines.

Broken markup is not rejected

HTML is forgiving, and so is this tool. Unclosed tags, a stray end tag or a lone < do not cause an error; the formatter keeps every character and indents what it can. It is a formatter, not a validator, so it will not tell you that your document is invalid. To shrink the result again, use the HTML Minifier, and for stylesheets use the CSS Minifier.

Frequently asked questions