Formatters

HTML Formatter

Indent HTML and find unbalanced tags.

Input
HTML input
Output
Result
Options

Spaces per level of nesting.

About this tool

Indenting HTML makes its nesting visible, which is usually what you need when working with minified markup or template output. As a side effect the formatter reports unbalanced tags, the most common cause of a layout that collapses unexpectedly.

Formatting HTML is riskier than formatting data, because whitespace can be significant. Inside a <pre> block it is content, and between inline elements it is a rendered space. Both are preserved here.

How to use it

  1. Paste or upload your htmlDrop a file onto the input pane, use the file picker, or paste the text directly.
  2. Adjust the options if neededThe defaults suit most input; open Options to change the behaviour.
  3. FormatPress Format, or use Ctrl+Enter (Cmd+Enter on macOS).
  4. Copy or downloadCopy the result, or download it as a .html file.

Worked examples

Each example below is executed against this tool by the test suite, so what you see is what the tool actually produces.

Minified HTML with a pre block

Input

<div><p>Hello</p><pre>  keep
  this</pre><br></div>

Output

<div>
  <p>
    Hello
  </p>
  <pre>  keep
  this</pre>
  <br>
</div>

The <pre> contents keep their original spacing while everything around them is indented.

What to watch for

The details that decide whether a conversion is correct, and where information can be lost without any error being raised.

Whitespace-sensitive elements are left alone
Content inside <pre>, <textarea>, <script> and <style> is emitted exactly as written. Re-indenting a <pre> block would change what the page displays, and reformatting script contents could break string literals, so those regions are treated as opaque.
Unclosed tags are reported
Because indentation requires tracking the element stack, the formatter knows which elements were never closed and which closing tags had no opener. Both are listed as warnings, an unclosed <div> is a frequent cause of content appearing in the wrong container.
Void elements need no closing tag
Elements like <br>, <img>, <input> and <meta> cannot have children, so they never open a new indentation level. The trailing slash in <br /> is XHTML style and optional in HTML5; both forms are accepted.
Attributes are tidied but not reordered
Whitespace within a tag is collapsed to single spaces, while quoted attribute values are left exactly as written. Attribute order is preserved, since it can matter for readability and for some framework directives.
Formatting is not validation
The formatter will happily indent markup that is invalid HTML, such as a <div> inside a <p> or a table with misplaced rows. It reports tag balance only. Use the W3C validator for conformance checking.

Limitations

  • Reports tag balance rather than validating against the HTML specification.
  • Does not reformat embedded JavaScript or CSS.
  • Processing happens in your browser, so very large inputs are bounded by available memory. Files above roughly 10 MB are handled but will feel slower, and multi-hundred-megabyte files are better suited to a command-line tool.

Questions

Will formatting change how my page renders?
Whitespace inside pre, textarea, script and style is preserved, and spacing between inline elements is kept. Rendering should be unchanged, though adding whitespace around inline content can very occasionally shift text by one space.
Does this validate my HTML?
It reports unclosed and unmatched tags, but not conformance. A structurally invalid nesting like a div inside a p still formats. Use the W3C validator for that.
Why is <br> not indented as a container?
It is a void element and cannot contain anything, so it does not open an indentation level.

Related tools

More HTML tools