HTML Formatter

Developer Tools HTML, CSS and Frontend

Paste HTML and the formatter puts each tag, comment and run of text on its own line, indented by nesting depth. For example, a one-line list with two items becomes four lines, with each li indented one level. Elements that hold only text stay on a single line, and void tags such as br never add a level.

About this tool

Markup copied from a page source, an email template or a CMS export usually arrives as one long line, which makes a missing closing div almost impossible to find. This formatter rebuilds the indentation so the structure is visible again. It counts the elements, the deepest nesting level and the comments, and it warns when a tag was left open or a closing tag has no partner. Script and style blocks are re-indented as whole blocks, and pre and textarea contents are left character for character, because whitespace there changes what the browser shows. It is a formatter, not a validator: it does not check attribute names or which elements may contain which, and it runs entirely in your browser.

How to use it

Paste or open the markup
Paste HTML into the box, or open an .html or .txt file from your device.
Pick the indent
Choose 2 spaces, 4 spaces or tabs to match your project's style.
Check the warnings
A warning means an element was never closed or a closing tag was stray; fix it in the source.
Copy the result
Use Copy result to take the formatted HTML back to your editor.

Examples

A paragraph with a line break

HTML to format: <p>Line<br>break</p>
Indent with: 2 spaces

Result Formatted HTML: <p>
Line
<br>
break
</p>
Lines: 5
Elements: 2
Deepest nesting: 1
Comments: 0
Input length (characters): 20
Output length (characters): 30

Split the input into 5 tokens: tags, comments, declarations and text.
Placed each token on its own line, indented 2 spaces per nesting level; an element holding only text stays on one line.
Void elements such as br and img do not open a level; pre and textarea contents are kept exactly as written.

The br tag is a void element, so it sits on its own line at the same depth as the text around it instead of indenting what follows.

A minified list

HTML to format: <ul><li>One</li><li>Two</li></ul>
Indent with: 4 spaces

Result Formatted HTML: <ul>
<li>One</li>
<li>Two</li>
</ul>
Lines: 4
Elements: 3
Deepest nesting: 2
Comments: 0
Input length (characters): 33
Output length (characters): 44

Split the input into 8 tokens: tags, comments, declarations and text.
Placed each token on its own line, indented 4 spaces per nesting level; an element holding only text stays on one line.
Void elements such as br and img do not open a level; pre and textarea contents are kept exactly as written.

Each list item holds only text, so it stays on one line, indented four spaces inside the ul.

A missing closing tag

HTML to format: <div><p>Hi</div>
Indent with: 2 spaces

Result Formatted HTML: <div>
<p>
Hi
</div>
Lines: 4
Elements: 2
Deepest nesting: 2
Comments: 0
Input length (characters): 16
Output length (characters): 25

Split the input into 4 tokens: tags, comments, declarations and text.
Placed each token on its own line, indented 2 spaces per nesting level; an element holding only text stays on one line.
Void elements such as br and img do not open a level; pre and textarea contents are kept exactly as written.

The p element is never closed, so the formatter closes it at the div and warns that the nesting may not be what was meant.

How it is calculated

indent of a line = nesting depth × indent unit

nesting depth: number of open, non-void elements that contain the token
indent unit: 2 spaces, 4 spaces or one tab, as chosen

The input is split into tokens: opening tags, closing tags, comments, declarations such as the doctype, and text. Quoted attribute values are skipped while looking for the end of a tag, so a greater-than sign inside an attribute does not cut it short. Each opening tag raises the depth by one and its closing tag lowers it. The 14 void elements in the WHATWG list (br, img, input, meta and others) and self-closed tags never raise it. Runs of whitespace in text collapse to one space.

When not to use it

Do not use it to check that a page is valid HTML; the W3C validator checks content models and attributes.
Skip it for template files mixing HTML with Blade, JSX or Liquid tags, which it reads as plain text.

Common mistakes

Formatting inline-heavy prose, where new line breaks between inline tags can add visible spaces.
Ignoring the unclosed-tag warning, which usually points at the real bug in the original markup.

Frequently asked questions

Does formatting change how the page renders?

Almost never for block layout. Whitespace between block elements such as div, ul and p is ignored by the browser. Between inline elements such as span or a, a new line can render as a single space, so check inline text after formatting.

Why is my pre block not indented?

Whitespace inside pre and textarea is displayed exactly as written, so adding indentation would change the visible content. The formatter copies those blocks unchanged.

Which tags are treated as void?

The 14 void elements from the WHATWG HTML standard: area, base, br, col, embed, hr, img, input, link, meta, param, source, track and wbr. Any tag ending in a slash before the closing bracket is treated the same way.

What happens with an unclosed tag?

When a closing tag matches an element further up, every element opened after it is closed at that point and counted in a warning. A closing tag with no matching opener is kept at the current depth and also reported.

Are scripts and styles formatted?

Their lines are kept in order and shifted to the right depth, with the common leading indentation removed. The JavaScript or CSS inside is not reformatted token by token.

Is my markup uploaded?

No. Tokenising and indenting happen in your browser, and opening a file reads it locally without sending it anywhere.

Cite this tool

Using this tool in an assignment, article or report? Copy a citation, or a link for your website.

APA

Tools Directory Editorial Team. (2026, October 18). HTML Formatter. Tools Directory. Retrieved October 26, 2026, from https://tools.milunir.com/developer-tools/html-css-and-frontend/html-formatter/

MLA

Tools Directory Editorial Team. “HTML Formatter.” Tools Directory, 18 Oct. 2026, https://tools.milunir.com/developer-tools/html-css-and-frontend/html-formatter/. Accessed 26 Oct. 2026.

Chicago

Tools Directory Editorial Team. “HTML Formatter.” Tools Directory. Last modified October 18, 2026. Accessed October 26, 2026. https://tools.milunir.com/developer-tools/html-css-and-frontend/html-formatter/.

Link

<a href="https://tools.milunir.com/developer-tools/html-css-and-frontend/html-formatter/">HTML Formatter – Tools Directory</a>