HTML Beautifier & Formatter
Free HTML beautifier. Indent messy or minified HTML without changing how the page renders — tags, attributes and text are copied exactly, in your browser.
Runs in your browserNothing uploadedFree · no signup
Only whitespace is changed, and only where a browser does not render it. Tags, attributes, quoting and letter case are copied through exactly, nothing is added or removed, and an element holding text — like <p>Some <b>bold</b> text</p> — stays on one line, because a line break between inline tags is a space on the page. Need the reverse? Use the HTML Minifier.
Frequently asked questions
- Can beautifying HTML change how my page looks?
- It can, and that is the thing to watch for. In HTML the whitespace between two inline tags is a rendered space, so a formatter that puts <span>a</span><span>b</span> onto two lines has just added a word gap that was not there. This tool only ever breaks a line next to a block-level boundary, where the browser throws the whitespace away. Anything holding text or inline tags stays on one line with its text copied through byte for byte.
- Will it rewrite my tags or attributes?
- No. The only thing that ever changes is whitespace. Attribute order, quoting (double, single or none), bare boolean attributes like disabled, and the letter case of tag names are all copied straight out of your source, and no tag is ever added or removed. That matters if you are formatting a template: lower-casing <MyComponent> would break a Vue or JSX-style component, and adding a </li> would change what a framework parses.
- What happens to pre, textarea, script and style?
- The contents of pre and textarea are left exactly as written, because every space in them is on the page — and no newline is inserted after <pre>, since a browser swallows it. Script and style blocks are shifted to the new indentation but never rewritten, and even that shift is skipped when the block contains a template literal or a line continued with a backslash, where a line's leading spaces can be part of a string. An inline style="white-space: pre" is honoured too.
- Why did my custom element stay on one line?
- Because a custom element with no CSS is display: inline, so a line break beside it would add a rendered space, exactly as it would beside a <span>. If you know your components are block-level, tick "Treat custom elements as block-level" and they will be indented like a div. It is off by default because it is the one option that can change how the page renders.
- Does it handle HTML with missing closing tags?
- Yes. A bare <li>, <p>, <tr> or <td> is legal HTML, and the tool applies the same optional-end-tag rules a browser does, so those elements are indented at the right depth. It tells you how many it found, and it does not add the missing tags — the output stays byte-identical to your input apart from whitespace. A stray closing tag with no opening tag is reported and left exactly where it is.
- Is my HTML uploaded anywhere?
- No. The markup is parsed and formatted entirely in your browser and nothing is sent to a server, so a page template holding internal URLs, keys or customer data never leaves your device.