How to format HTML
- Paste your HTML into the box above.
- Pick an indent of 2 spaces, 4 spaces or tabs.
- Tick Remove HTML comments if you want them gone.
- Read the indented result in the output box.
- Copy the result or download it.
What this HTML formatter gives you
- Indents that follow the real element nesting.
- Void tags such as img, br and input that never open a new level.
- Short text elements kept on a single line.
- Exact copies of code inside pre, script and style tags.
- Comments kept by default or removed on request.
- Safe handling of doctype lines and conditional comments.
Why use an HTML formatter?
HTML is a tree. Indents show that tree on a flat page. Without them you must count tags by eye to match each closing tag with its opening tag.
With indents the shape jumps out. An unclosed element often shows itself as a section that never returns to the left margin. So the main reason to format is debugging and not looks. A missing </div> hides well in minified markup. In indented markup you can see it.
The whitespace warning to take seriously
HTML differs from CSS or JSON here. Space between inline elements shows on the page as a real space. That space is part of your layout.
Take <span>a</span><span>b</span> as an example. It shows as "ab". Put each span on its own indented line and it shows as "a b". Inline block grids break the same way after a reformat. So check the rendered page if your layout depends on tight spacing.
Which tags does the HTML formatter protect?
| Tag | Why the tool leaves it alone |
|---|---|
| pre | The page shows every space and line break as written |
| textarea | The content is the starting value of the field |
| script | An HTML parser cannot safely reindent JavaScript |
| style | The same risk applies to embedded CSS |
Want to tidy the code inside script or style? Copy it out and use a JavaScript or CSS formatter on it.
Void tags and one line elements
Some tags have no closing tag. The list includes img and br. It also covers input, meta and link. A weak formatter does not know this. It indents everything after an image one level too deep. The error then grows down the whole document. This tool knows the full list of void tags.
It also keeps short text elements on one line. A heading like <h2>Title</h2> stays on one line and does not turn into three. That reads better. It also matches how people write markup by hand.
An HTML formatter does not validate
The formatter indents what you give it. It does not check that tags nest properly. It does not check for required attributes. Badly nested markup gives oddly indented output. That odd shape is itself a useful hint. For a real check, run the page through the W3C validator.
Common HTML formatter problems
A gap appeared between my buttons
The buttons sat on one line before. Now each sits on its own line and the browser adds a space. Put them back on one line or use flexbox for the layout.
The indent drifts to the right
A tag never closed. Look for the point where the drift starts. The missing closing tag sits near there.
My inline script looks untouched
That is on purpose. The tool copies script content through exactly.
How the HTML formatter reads your page
The tool walks through your markup one tag at a time. It adds one level of indent for each opening tag. It removes one level for each closing tag. Void tags add nothing. Protected tags pass through as one block. The result shows the true shape of your page.
Tips for clean markup
- Format a copy and keep the original until you check the page.
- Use the same indent width as the rest of your project.
- Remove old comments before you share code with others.
- Validate the page after you fix any drift.
Who uses an HTML formatter?
Web developers debug templates. Bloggers clean markup from page builders. Email designers read bulky newsletter code. Students learn how tags nest. Support teams read HTML that customers send in.
Your markup stays private
The tool works in your browser and uploads nothing. Need to shrink the page again for shipping? Use the HTML minifier. Want to show tags as text on a page? Try the HTML encoder. Do you write in Markdown first? The Markdown to HTML converter helps.