HTML Formatter & Beautifier

About this tool

HTML that comes out of a CMS, an email builder, a minified build or a "view source" window is often one enormous line, or a mix of tabs and spaces that nobody can follow. This HTML formatter re-indents the markup so the nesting is visible at a glance, and its Minify mode does the reverse for when you need the smallest file. Beautifying is done by the open-source js-beautify library (version 1.15.1, MIT licence), loaded from this site. The result is placed in the output box as plain text, so the page never runs or displays your markup, and nothing is uploaded.

How to use the HTML Formatter

1. Paste your HTML: a full page or just a fragment such as a single <div>. A small sample page is loaded to start with.
2. Pick an indent (2 spaces, 4 spaces or a tab) and, if you like, a line length to wrap long lines at.
3. Set the options. Untick Format inline CSS and JavaScript to leave the contents of <style> and <script> blocks exactly as they are.
4. Click Beautify HTML, or Minify for a compact version. The status line shows the line and character counts.
5. Copy or download the result as formatted.html or minified.html.

What beautifying changes, and what it leaves alone

Beautifying only adds, removes or changes whitespace between tags. Tag names, attributes, attribute order, quotes and text are not rewritten, and the tool does not fix broken markup: an unclosed <p> stays unclosed and simply affects the indentation that follows. In detail:

• Block elements such as div, ul, li, head and body start on their own line and indent their children.
• Inline elements such as a, em, b, span and img stay inside the line of text they belong to.
• The contents of <pre> and <textarea> are copied exactly, character for character, because every space and line break in them is displayed.
• <style> and <script> contents are re-indented with the library's CSS and JavaScript beautifiers when the option is on. A <script type="application/ld+json"> block is formatted as JSON.
• Long tags: when wrapping is on, a start tag that would pass the limit has its attributes moved onto following lines.

Why inline elements are indented so carefully

In HTML, whitespace in text is mostly collapsed, but not ignored. MDN's guide to how whitespace is handled explains that a run of spaces, tabs and line breaks is drawn as a single space, and that whitespace between adjacent inline or inline-block elements produces a visible space, just like the space between two words. So <b>bold</b><i>italic</i> renders as "bolditalic", while the same two tags on separate lines render as "bold italic". A formatter that put every element on its own line would quietly add those gaps. That is why the beautifier keeps a run of inline elements on one line and only breaks lines around block-level elements, where whitespace normally has no visible effect.

How the Minify option works

Minify is this site's own conservative code, not part of js-beautify. It reads the HTML into tags and text and then:

• removes comments, except Internet Explorer conditional comments that start with <!--[;
• collapses each run of spaces, tabs and line breaks in text to one space (a non-breaking space,   or U+00A0, is not whitespace for this purpose and is kept);
• removes the remaining space next to block-level tags such as div, p, li and head, but keeps one space between inline elements;
• tidies the whitespace between attributes inside tags, without touching attribute values;
• leaves everything inside <pre>, <textarea>, <script> and <style> exactly as it was.

Because script and style contents are left alone, run them through the JavaScript Minifier and CSS Minifier separately if you want those smaller too. One caveat: if your CSS turns list items or other block tags into inline-block, or gives an element white-space: pre, the whitespace minify removes or collapses there may have been visible. Check such pages after minifying.

For example, this input:

<ul>
  <li>One   <b>two</b></li>
  <!-- note -->
  <li>Three</li>
</ul>
<pre>  keep   this</pre>

minifies to:

<ul><li>One <b>two</b></li><li>Three</li></ul><pre>  keep   this</pre>

Worked example

The sample in the tool is a small page written on two lines: everything up to the first line of the <pre> block, then the rest. With the default settings (2-space indent, no wrapping, inline CSS and JavaScript formatted, blank lines before <head>, <body> and </html>), Beautify HTML produces:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Team Page</title>
  <style>
    .card {
      padding: 16px;
      border: 1px solid #ddd
    }
  </style>
</head>

<body>
  <div class="card">
    <h1>Our <em>small</em> team</h1>
    <p>Write to <a href="mailto:hello@example.com">hello@example.com</a>.</p>
    <ul>
      <li>Design</li>
      <li>Engineering</li>
    </ul>
    <pre>  npm install
  npm test</pre>
  </div>
  <script>
    document.querySelector('h1').addEventListener('click', function() {
      alert('Hi')
    })
  </script>
</body>

</html>

Notice three things. The h1 and p lines keep their em and a tags inline, so no new spaces appear in the text. The second line inside <pre> is not indented to match the code around it, because that would change what the visitor sees. And the CSS rule and the click handler have been expanded and indented by the CSS and JavaScript beautifiers.

Common mistakes

• Expecting validation. The formatter does not report unclosed or misnested tags. Use the W3C Markup Validation Service for that.
• Formatting a template. Handlebars, Jinja or PHP syntax mixed into HTML can confuse any HTML formatter. Check the result before committing it.
• Re-indenting by hand inside <pre>. Lining up <pre> content with the surrounding code adds visible spaces to every line.
• Minifying for speed alone. Many servers compress HTML with gzip or Brotli, which already shrinks repeated whitespace a lot, so minifying often saves less than the character count suggests.

Common use cases

• Reading the source of a page, email template or widget that was delivered minified
• Cleaning up HTML pasted from a CMS or website builder before editing it
• Producing a compact snippet for an embed code, a JSON string or a size-limited field

Formatting data instead? Try the XML Formatter or the JSON Formatter. To see rendered output from Markdown, use the Markdown Previewer.