How to use the HTML Formatter & Beautifier
- Paste HTML in the left box, open an .html file, or click Load sample.
- The formatted HTML appears on the right as you type.
- Set the indent, the line width, and whether long tags wrap their attributes onto separate lines.
- Copy or download the result. Preview opens it in the HTML Viewer.
Before and after
<ul class="nav"><li><a href="/">Home</a></li><li><a href="/menu">Menu</a></li></ul>
becomes
<ul class="nav"> <li><a href="/">Home</a></li> <li><a href="/menu">Menu</a></li> </ul>
What the formatter changes
Only whitespace: line breaks and indentation between tags. Text, attributes and the order of everything stay as they were. Inline elements like <a>, <b> and <span> stay on the line with their text, so no visible spaces are added to your page. Contents of <pre> and <textarea> are left untouched.
Formatting is done by the open-source js-beautify library, the same engine used in many code editors.
Frequently asked questions
Is my HTML uploaded?
No. It's formatted in your browser and never leaves your device.
Does it handle CSS and JavaScript inside the page?
Yes. Code inside <style> and <script> tags is formatted or minified along with the HTML.
Will formatting change how my page looks?
Almost never. Only whitespace between block-level tags changes. Whitespace inside <pre>, <textarea> and inline text is kept.
Does it fix broken HTML?
It indents whatever you paste but doesn't repair missing or mismatched tags. Badly nested HTML usually shows up as indentation that drifts.
Updated