HTML beautifier
Format HTML with Prettier: nested tags indented, long attribute lists wrapped, and inline <script> and <style> blocks tidied too. Minify mode collapses whitespace and strips comments for a smaller page.
Worked example
A navigation list squeezed onto one line.
<nav><ul><li><a href="/">Home</a></li><li><a href="/blog">Blog</a></li></ul></nav>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
Common mistakes
Closing tags out of order
<b><i>text</b></i> overlaps two elements. Browsers patch it up differently; close the inner tag first.
Assuming whitespace never matters
<a>One</a><a>Two</a> and the same links on separate lines render differently: the line break becomes a space. Both modes here keep that difference.
Expecting Minify to shrink scripts
Inline JavaScript and CSS are kept as written. Minify them with your build tool, or use the CSS beautifier’s Minify mode for styles.
Escaping by hand
A literal < or & in text should be < or &. The HTML entity encoder converts a whole block at once.
How it works
- 1
Paste your markup
A full page or a fragment. Open or drop an .html file; it’s read on your machine.
- 2
Indent or compact it
Format indents the tree and wraps at your line width. Minify collapses whitespace but leaves <pre>, <textarea>, <script> and <style> exactly as written.
- 3
Check the structure
A tag closed in the wrong place is reported with its line, so the output never silently restructures your page.
Questions
- Why do some lines start with “>”?
- Whitespace between inline elements such as <a>, <span> or <label> shows up on the page as a space. To add line breaks without adding visible spaces, Prettier moves the closing “>” of a tag onto the next line. It looks odd, but the page renders the same.
- What does Minify do?
- It removes comments (except Internet Explorer conditional comments), collapses each run of whitespace to one space, drops whitespace where it never shows (in the <head>, between table rows and cells, between options) and tidies spaces inside tags. Attribute values and inline scripts and styles are not changed or minified.
- Is Minify safe for every page?
- For normal HTML, yes: browsers already collapse whitespace the same way. The exception is an element other than <pre> or <textarea> that your CSS sets to white-space: pre; there, collapsed spaces would show. Use Format for such pages.
- Will it fix broken HTML?
- It fills in optional end tags such as </li> and </p>, which browsers also allow. A closing tag in the wrong place, like </div> while a <span> is still open, is reported with its line instead of being guessed at.