HTML Formatter
Paste messy or minified HTML and get clean, readable markup back - indented by nesting depth, one tag per line, with your <pre>, <textarea>, <script>, and <style> blocks left exactly as written.
- Free, no account
- No watermark
- No usage limit
About the HTML Formatter
Paste a wall of minified HTML and get it back a second later, indented by how deeply each tag nests, one tag per line, running entirely in your browser so nothing you paste gets uploaded. Choose 2 spaces, 4 spaces, or a tab and it reformats the instant you tap. Every formatter online will tell you that much.
A lot of the free ones drift crooked the moment they hit a <br> or an <img>, so the whole bottom of your file ends up indented too far, for no reason. And plenty quietly reflow the code inside your <pre> and <script> blocks, because they can't tell your JavaScript from your markup, so a page that rendered fine comes back broken. Neither case trips up the formatter here, because void tags never push the indent, so the last closing line sits exactly under the first, and the code inside your <pre>, <textarea>, <script>, and <style> comes back byte for byte, untouched. That's the reason to use this one instead of whatever came up first.
How to use
- Paste your HTML into the top box. A single minified line, a chunk of a template, or a whole document from
<!DOCTYPE html>down, it all works. - Pick your indent. The buttons switch between 2 spaces, 4 spaces, and a tab, and the output re-formats the moment you tap one, so try each and keep the one your project uses.
- Read the result underneath. It updates live as you type or paste, no button to press.
- Copy it with the button, or hit Download to save it straight to a
.htmlfile. - Curious first? Load sample drops in a squashed one-liner with a
<style>block, a self-closing image, a<br>, and a<pre>full of spacing, so you can watch what gets indented and what gets left alone.
The bug that makes other formatters drift crooked
If you've watched a formatter's indentation wander right until the closing tags are stranded in empty space, this is why.
Most tags come in pairs. An opening <div>, a closing </div>, whatever nests between them. The rule is simple: an opening tag steps the indent in, a closing tag steps it back out. Fine, until you meet a tag with no closing half.
Those are the void elements, and there are fourteen: <br>, <img>, <input>, <hr>, <meta>, <link>, <source>, <col>, <area>, <base>, <embed>, <track>, <wbr>, and <param>. There's no </br>, and no </img> either. Each one holds no children, a line break or an image, so it never closes. A formatter that doesn't know this treats <img> like an opening <div>, steps the indent in, and waits for a close tag that never comes. So everything below your first image sits a level too deep, and it only gets worse from there as more images stack up.
This tool carries all fourteen and treats each as a leaf, it prints at the current depth and changes nothing after it. Self-closed tags like <img /> and <br /> get the same handling. Paste a form of <input> fields or a gallery of images and the bottom lines up with the top, the way it always should have.
The code inside your pre and script, left exactly alone
This one actually matters, because getting it wrong doesn't just look funny, it changes what the file does.
Four elements hold content that isn't ordinary markup, where the whitespace is real data, not decoration you can shuffle:
<pre>renders every space and line break literally. That's its job, it's how you show a code sample or ASCII art with the alignment intact, so re-indent it and you've rewritten what someone was reading.- A
<textarea>shows its contents as the field's starting value, character for character. Add indentation and every line of that default text gains extra leading spaces. <script>is JavaScript. Reflow it and a stray newline can break a template literal or a regex, and even when it's safe, an HTML formatter has no business reshaping someone's code.- And
<style>is CSS, a separate language with its own rules. An HTML beautifier reaching in to tidy it is overstepping.
Plenty of free formatters open these blocks and reflow the insides anyway, which is how you end up debugging a page that worked fine before you "cleaned it up." This tool grabs everything from the opening <pre>, <textarea>, <script>, or <style> through its matching close tag and copies it out verbatim, indenting only that opening line and leaving the body alone. If you want the CSS tidied, run it through a CSS tool, and for the JavaScript, a JS beautifier. It formats the markup and leaves the embedded languages to the specialists.
What formatting actually changes
It only touches the whitespace between your tags, the line breaks the browser ignores anyway. It never renames a tag, reorders an attribute, strips a quote, or adds or removes an element, so the source stays the same HTML, just laid out to read.
The one case to watch is inline spacing. Whitespace between inline elements is real, word</a> <a>next shows a visible space on the page. And because every tag prints on its own line, two inline elements you deliberately butted together, say <span>a</span><span>b</span> meant to read as one unbroken word, come back on separate lines, and the browser reads that line break as a space between them. So on tightly packed inline content, glance at the result before you ship it. For ordinary block markup nothing shifts. Formatted HTML also diffs cleanly, a one-attribute edit shows up as a one-line change in review instead of the whole minified line going red.
Frequently asked questions
Should I use 2 spaces, 4 spaces, or tabs?
Match whatever the project already uses, that matters more than the choice. Starting fresh? Two spaces is the modern front-end default (React, Vue, and Prettier all lean that way) and it keeps deeply nested markup from sliding off the right edge, which bites harder in HTML than most languages because a component inside a section inside a main inside a body is four levels deep before any real content. Tabs have their own edge: a tab is one character each editor renders at whatever width its owner likes, so a teammate who wants wide indentation and you who wants narrow can share the same file. Just don't mix the two, that's what makes the misaligned mess everyone has fought once.
What's the difference between this and an HTML minifier?
They run in opposite directions. This adds whitespace to make HTML readable for a person editing it. A minifier strips it out to make the file smaller for the browser. The usual setup keeps source formatted in your repo and lets a build step minify it for production, so you read the pretty version and visitors get the small one. Paste minified HTML here to read it, minify the result when you're ready to ship.
Does it fix or validate my HTML, or just format it?
Just format. It's a beautifier, not a validator, so it lays out whatever you hand it without judging whether it's correct. Paste malformed markup and you get neatly formatted malformed markup, which is often what you want, because a missing close tag or a badly nested element is far easier to spot once the indentation is regular. It won't tell you the markup is broken, it just makes the break visible.
What happens if my HTML is incomplete or has a stray `<` in the text?
It handles it without crashing. Half a document, a tag that never closes, a literal < sitting in text like a < b, none of it throws an error. A lone < that isn't the start of a real tag is treated as plain text, and an element that never closes gets formatted as best it can to the end of what you pasted. You get the best-indented version available, not an error.
Can I format a full document, doctype and comments included?
Yes, paste the entire thing. The <!DOCTYPE html> line prints on its own row at the top, HTML comments (<!-- ... -->) stay on their own lines rather than folded into the markup, and the whole tree indents by nesting depth from <html> down. Load the sample to watch a full minified page unfold.
Is anything uploaded, and does it work offline?
Nothing is uploaded, ever. The formatter runs inside the page, so the HTML you paste never leaves your machine, and you can safely run a client's private markup or an internal template through it. Once the page has loaded, it keeps working offline.
Is there a size limit?
No fixed cap. Because it runs on your device, the ceiling is your available memory. A few hundred kilobytes formats the instant you paste. Push several megabytes on a low-end phone and it might pause for a beat, but there's no server timeout to hit and nothing counted against a quota.