HTML Formatter

The HTML Formatter takes minified or tangled markup and puts every tag and text fragment on its own line, indented two spaces for each level of nesting. It turns the one-line output of a page builder, email editor or scraper into something you can read, compare and edit.

How the output is laid out

The sample <div><p>Hello</p></div> becomes:

<div>
  <p>
    Hello
  </p>
</div>

A fuller document shows the other rules at work:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>
      Shop
    </title>
  </head>
  <body>
    <!-- nav -->
    <img src="a.png" alt="x">
    <p>
      Price:
      <b>
        ₹499
      </b>
      only
    </p>
  </body>
</html>

• Opening tags increase the indent and closing tags reduce it.
• Void elements that never have a closing tag (meta, img, br, input, link, hr and the rest of the HTML list) and self-closed tags ending in /> don't indent what follows.
• The doctype and comments are kept at the current level.
• Text between tags is trimmed and placed on its own line.

Spotting structure problems

Because indentation follows opening and closing tags strictly, the output makes nesting mistakes visible. A forgotten </div> leaves the rest of the document one level too deep, and a stray extra closing tag pulls it too far left. The same happens with HTML that legally omits optional end tags: <ul><li>One<li>Two</ul> is valid, but without </li> the formatter keeps stepping right. If the indentation drifts, look for a missing or optional closing tag at the point where it starts.

When formatting changes the page

Formatting is meant for reading. Before you publish the result, know that line breaks now separate inline elements and text. Browsers render a line break as a space, so markup like <b>₹</b><span>499</span> that was written without a gap will display as "₹ 499" after formatting. Content inside <pre> and <textarea>, where whitespace matters, is also re-indented. Scripts or styles that contain a < character, and attribute values that contain >, can be split in odd places. The formatter doesn't validate or repair HTML either.

Useful jobs for it

• Reading the source of an HTML email or landing page exported from a builder.
• Comparing two versions of a template line by line in a diff tool.
• Finding where a scraped value sits in a page before writing a selector for it.
• Checking that every section of a long page is closed properly after hand-editing it in a CMS code view.

Formatting runs in the browser. When you're done editing, compress the markup again with the HTML Minifier; for XML documents such as sitemaps, use the XML Formatter.