HTML Beautifier
Minified markup, template output and HTML pasted out of a page inspector all tend to arrive as one dense block. Indenting it properly makes the nesting visible, which is what you need when you are hunting for an unclosed tag or working out where a section begins.
This tool does one job: it re-indents the tags you give it. It has no minify mode, and it does not validate, lint or repair the markup, the way a CSS Minifier or JS Beautifier handles its own language.
Runs in your browser. HTML Beautifier processes your input on your own device. Nothing you enter or upload is sent to a server.
Did this tool help you? ☕
WebzTools is free to use. If this tool saved you some time, you can support the project with a coffee and help us keep improving the tools.
(opens in a new tab)How to use the HTML Beautifier
- Paste your HTML into the input area.
- Pick an indentation of 2 spaces, 4 spaces or a tab.
- Run the formatter.
- Copy the indented markup.
What beautifying changes, and what it doesn't
The formatter is a simple text splitter, not an HTML parser: it looks for literal < and > characters to find tag boundaries, then re-indents each level of nesting by one more step, using whichever indentation you picked. For ordinary markup, that is all that changes. It is not aware of attribute quoting or of where text content ends, so a literal < or > that appears inside a quoted attribute value or inside your own text is not reliably told apart from a real tag boundary; see the next section for worked examples.
It also does not check anything: no DOM validation, no accessibility checks, no linting for unclosed or mismatched tags. Those stay exactly as you pasted them, just easier to see once the nesting is visible.
Original indentation inside a <pre> block is not preserved
Input
<pre> line one
line two</pre>Output
<pre> line one line two </pre>
A literal < or > can confuse the tokenizer
Because the formatter looks for the characters < and > rather than parsing real tag boundaries, one appearing where you did not intend a tag splits your markup there too. A greater-than sign inside a quoted attribute value is read as the end of the opening tag, as the first example shows. A less-than sign inside ordinary text is read as the start of a new tag, as the second example shows.
A > inside a quoted attribute value
Input
<div title="1 > 0">x</div>
Output
<div title="1 > 0"> x </div>
A < inside text content
Input
<p>2 < 3</p>
Output
<p> 2 < 3 </p>
Inline elements with no space between them
If your source has two inline elements sitting flush together, such as a word immediately followed by a bolded character with no space, the formatter still inserts a line break between them. A browser collapses that line break to a single space when it renders the page, so the beautified markup can display with a gap that was not in the original. Rendered, the example below becomes "Hello !" instead of "Hello!". It is an edge case rather than the common path, but worth checking in markup where inline spacing matters, such as typography-sensitive text.
No space in the source between "Hello" and <b>
Input
<p>Hello<b>!</b></p>
Output
<p>
Hello
<b>
!
</b>
</p>Frequently asked questions
Does formatting change how the page renders?
It is meant only to change whitespace between tags, and for ordinary block markup that is all it does. Three cases can shift the rendered result: whitespace is meaningful inside <pre> and <textarea>, and the formatter re-indents their contents like any other element; a literal < or > inside a quoted attribute value or inside your text content can be read as a tag boundary, splitting it; and when two inline elements originally sat flush together with no space between them, inserting a line break there can be rendered as a visible space. See the worked examples above for all three.
Is my markup uploaded?
No. Formatting happens in your browser.
Will it fix broken HTML?
No. It formats what you give it. Indenting the markup often makes a missing closing tag obvious, but the tool does not detect, validate or repair it for you.
Does it minify HTML too?
No, this tool only beautifies. For the other direction on CSS and JavaScript, see the CSS Minifier and the basic minify option on the JS Beautifier.