HTML Beautifier & Formatter
Paste minified or messy HTML and get clean, properly indented markup — or minify it back down.
How to use the HTML Beautifier & Formatter
- Paste your HTML into the input box.
- Choose an indent size — 2 spaces, 4 spaces or tab.
- Click Beautify to format it, or Minify to compress it.
- Copy the result or download it as an .html file.
Examples
| Input | Output | Notes |
|---|---|---|
<ul><li>One</li><li>Two</li></ul> | <ul>
<li>One</li>
<li>Two</li>
</ul> | Beautify with 2-space indent |
<div>
<p>Hi</p>
</div> | <div><p>Hi</p></div> | Minify |
<section><h2>Title</h2><p>Text</p></section> | <section>
<h2>Title</h2>
<p>Text</p>
</section> |
Why format HTML?
HTML beautifying (also called pretty-printing or indenting) restores structure to markup that has been minified, generated by a CMS, or edited without care. Consistent indentation makes it far easier to spot missing tags, understand nesting and diff two versions in source control.
What is preserved
| Element | Behaviour |
|---|---|
| <pre>, <textarea> | Whitespace kept exactly — reindenting would change output |
| <script>, <style> | Inner code left untouched |
| Comments | Kept when beautifying; optionally stripped when minifying |
| Void tags (<br>, <img>…) | Not given a closing tag or extra indent |
Related tools
Formatting data instead of markup? Use the JSON Formatter. Need placeholder markup to format? Try the Lorem Ipsum Generator with the HTML option, or edit visually in the HTML Editor.
Frequently asked questions
What does an HTML beautifier do?
It re-indents HTML so every nested element sits one level deeper than its parent, putting tags and text on their own lines. This makes machine-generated or minified markup readable so you can review and edit it.
Does beautifying change how my page renders?
No. It only adds whitespace between block-level tags, which browsers ignore. Content inside <pre>, <textarea>, <script> and <style> is left byte-for-byte unchanged so nothing visible or functional is altered.
What is the difference between beautify and minify?
Beautify adds indentation and line breaks for humans. Minify strips comments and collapses whitespace between tags to shrink the file for faster page loads. Use beautify while developing, minify for production.
Is my HTML uploaded to a server?
No. All formatting happens locally in your browser with JavaScript, so proprietary templates and unpublished pages stay private.
Can it fix broken HTML?
It flags obvious problems like unclosed or mismatched tags, but it does not rewrite your markup. Fix the reported issue and run it again for the cleanest result.