Toolbox101 All tools

Formatters

Prettify HTML with 4-space indentation

HTML Formatter re-indents the markup you paste, four spaces per nesting level by default ("Indent" also offers 2 spaces or a tab), and leaves tag names, attributes and text untouched. Front-end developers use it to untangle minified email templates, tidy generated markup before editing and make server-rendered fragments readable. Inline elements and their text stay on one line, while block-level tags are re-wrapped, exactly as the example shows.

Open HTML Formatter in the app Browse all tools

How to use HTML Formatter

  1. Open HTML Formatter in the Toolbox101 app.
  2. Paste the markup you want to read into the HTML box; a minified email template or a generated fragment works well.
  3. Pick Indent: 2 spaces, 4 spaces (the default) or Tab.
  4. Read the re-indented HTML in the Output box. Inline elements and their text keep their line; only the whitespace around block-level tags moves.
  5. Click Copy to put the formatted HTML on your clipboard.

Worked example

HTML Formatter returns the output below for this input.

Input

<ul><li>one</li><li>two</li></ul><p>Hello <strong>world</strong>!</p>

Output

<ul>
    <li>one</li>
    <li>two</li>
</ul>
<p>Hello <strong>world</strong>!</p>

Check it yourself: open HTML Formatter and enter the same input.

Frequently asked questions

Why is my formatted HTML indented with four spaces?

Four spaces is the default. Change Indent to 2 spaces or a tab and the output updates at once. Each block-level tag pushes its children one level deeper, and closing tags drop back to the parent's indent; the example shows ul at the left margin with its li children four spaces in.

Does formatting fix broken or invalid HTML?

No. The formatter re-indents what is there, but it is not a validator. A missing closing tag, stray character, or duplicated attribute is still broken after formatting, and the indentation can look off in those places. Check suspect markup with an editor or linter first.

What is the difference between HTML and XML formatting here?

The HTML formatter is built on js-beautify and understands HTML's inline elements, void tags and optional end tags. The XML formatter has its own tag-by-tag layout and a well-formedness check, which real-world HTML often fails (an unclosed <br>, say). Use this page for HTML and the XML Formatter for XML documents.

Use HTML Formatter now

Open HTML Formatter in the app

Runs in your browser. Nothing you type is uploaded.