This HTML formatter rewrites minified or single-line HTML so that every tag and every run of text sits on its own line, indented by nesting depth. The Minify button does the reverse and strips comments and the whitespace around tags. Both actions run as JavaScript in your browser, and each run reports the input and output size in characters and bytes.
How to use the HTML formatter
- Paste your markup into the Input HTML box, or press Try Example to load a sample page with a doctype, inline CSS, a script and a comment.
- Pick 2 spaces, 4 spaces or Tab from the Indent menu. 2 spaces is selected when the page loads.
- Click Beautify to format HTML, or press Ctrl+Enter (Cmd+Enter on a Mac) in the input box. Click Minify instead to shrink the markup.
- Read the size panel, which compares the input and output in bytes, then press Copy above the Output box.
Example: beautifying a one-line navigation list
With the indent set to 2 spaces, this input:
<ul class="nav"><li><a href="/">Home</a></li><li><a href="/pricing">Pricing</a></li></ul>becomes:
<ul class="nav">
<li>
<a href="/">
Home
</a>
</li>
<li>
<a href="/pricing">
Pricing
</a>
</li>
</ul>Home and Pricing sit one level below their links because text gets a line of its own as well. The size panel for this run shows 89 B before and 136 B after (+52.8%), since indentation adds bytes.
Beautify or minify
| Beautify | Minify | |
|---|---|---|
| Result | One tag or text run per line, indented | Whitespace between and around tags removed |
| Indent menu | Used | Ignored |
| Comments | Kept at the current depth | Removed, except ones starting with <!--[if |
| script, style, pre, textarea | Contents not re-indented | Kept exactly as written |
| Size | Grows | Shrinks |
The Minify button is a simple HTML minifier built on regular expressions. Given this card:
<!-- promo card -->
<div class="card">
<h2>Spring sale</h2>
<p>Save 20% this week.</p>
</div>it returns <div class="card"><h2>Spring sale</h2><p>Save 20% this week.</p></div> and reports Saved 31 B (30.7% smaller).
Where it helps
Beautify HTML that arrives on one line, such as a template exported by a CMS or email builder, or a snippet copied from a browser's page source. One tag per line makes nesting levels easy to count. Because it is an HTML beautifier online, there is nothing to install, which helps on a borrowed machine or in an editor with no formatter set up. If you write in Markdown, the Markdown preview gives you the HTML to format here.
Minify suits a finished static page or HTML email fragment that only needs its comments and indentation removed. Read the output before you publish it, because of the word-joining problem described under the limits below.
Limits of this HTML formatter
- Beautify matches tags with a regular expression and counts opening and closing tags. It does not validate or repair markup, so a missing closing tag, including optional ones such as
</li>and</p>, pushes every following line one level deeper. - Inline elements are split onto separate lines the same way as blocks. A line break renders as a space, so
<strong>Hi</strong>!shows a gap before the exclamation mark once beautified. - Beautify does not re-indent the contents of
script,style,preandtextarea. Inside apreblock it still puts nested tags and text on separate lines and trims the first line's leading spaces, which can change what the block displays. - Minify deletes whitespace on both sides of every tag, which can join words:
<p>Read the <a href="/docs">docs</a> first.</p>comes out as<p>Read the<a href="/docs">docs</a>first.</p>. - Minify leaves script and style blocks exactly as written. To shrink that code as well, run it through the CSS formatter or the JavaScript formatter.
The same paste-and-format approach for data is covered in how to format JSON in your browser, and the other formatters are listed under developer tools.
