HTML beautifier
What is an Html Beautifier?
HTML from CMS exports, email builders, minified production pages or generated code is often a single dense block. The HTML beautifier re-indents it so the nesting of elements is visible, which makes it much easier to find unclosed tags, edit sections or review changes.
How to use it
- Paste your HTML.
- Choose the indent size if options are available.
- Copy the formatted result.
Example
Input:
<ul class='nav'><li><a href='/'>Home</a></li><li><a href='/docs'>Docs</a></li></ul>Output:
<ul class='nav'>
<li><a href='/'>Home</a></li>
<li><a href='/docs'>Docs</a></li>
</ul>Things to know about HTML whitespace
- Inline elements such as
a,spanandstrongare sensitive to whitespace; adding line breaks between them can add visible spaces. Good beautifiers keep inline content on one line. - pre and textarea content must not be re-indented, because whitespace there is displayed literally.
- Embedded scripts and styles are formatted according to their own language rules.
When to use it
- Debugging layout problems caused by wrongly nested tags.
- Editing HTML email templates exported from builders.
- Reading the source of a page you are studying.
For project code, use Prettier in your editor so formatting is applied consistently on save.
Frequently Asked Questions
Does beautifying HTML change how the page looks?
Normally no. Block-level formatting is safe, but extra whitespace between inline elements can add small visible gaps, so check the result.
Is the content of pre tags changed?
It should not be. Whitespace in pre and textarea is significant and should be preserved.
Can it fix invalid HTML?
It reformats the markup but does not correct errors. Indentation often makes unclosed or misnested tags easier to spot.
Is my HTML uploaded?
No. Formatting runs entirely in your browser.
What indentation size should I use?
Two spaces is the most common convention for HTML, used by Prettier and many style guides. Four spaces also works if your team prefers it.