How to format HTML
- Paste HTML: a whole page, a template, an email or a fragment copied from DevTools.
- Choose the indentation and press Format.
- Nested elements are indented one level per depth, block elements start on new lines, short inline elements such as
<b>and<a>stay inline, and embedded<style>and<script>blocks are formatted as CSS and JavaScript. - Copy the result or download it.
When an HTML beautifier helps
Generated HTML from page builders, CMS exports, email editors and server templates is often a single line or wildly inconsistent. Formatting it shows the real structure: you can see which div closes where, find an unclosed tag that breaks a layout, compare two versions with a diff tool, or clean up markup before handing it to another developer.
The formatter uses js-beautify's HTML engine. Content inside <pre> and <textarea> is kept as written because whitespace matters there. One thing to watch: between inline-block elements, such as buttons in a row, adding a line break can create a small visible gap. If that happens, check those spots after formatting.
Formatting runs in your browser, so private templates and emails are never uploaded.
FAQ
Does the formatter fix invalid HTML?
It indents what is there but does not repair broken markup. Unclosed tags will show up as unexpected nesting, which helps you find them.
Can I format HTML emails?
Yes. Email HTML with tables and inline styles formats well, which makes editing much easier. Minify it again before sending if size matters.
Does it change attribute order?
No. Attributes are kept in their original order and values are not changed.