HTML Formatter
Turn one long line of HTML into neatly indented markup you can read and edit.
Format HTML Online
HTML that comes out of an email builder, a CMS export, a page builder or a minified production site is usually one enormous line. Finding a single div in it is miserable. This page is the Code Formatter set to HTML: paste the markup and every element is placed on its own line and indented by how deeply it is nested.
The formatting is done by js-beautify, a widely used open-source formatter, running inside your browser tab. Nothing is uploaded.
What the formatter does
- Block elements such as div, section, ul and li each start a new line, indented under their parent.
- Inline elements such as a, b, span and em stay inside the line of text they belong to.
- Attributes are kept exactly as written, in the same order.
- Blank lines you added on purpose are kept, up to two in a row.
When to format and when to minify
Format when a person has to read or edit the file. Minify when a browser has to download it: removing comments and indentation typically saves 10 to 20% of an HTML page before gzip. For most sites the bigger win is compression on the server, but minifying still helps templates that are inlined into emails or other pages.
Related tools
For the stylesheet that goes with the page, use the CSS minifier; for scripts, the JavaScript beautifier. To compare the markup before and after an edit, use Text Compare.