HTML pretty printer

Parse, then print

A pretty printer does not edit text. It reads structure and writes it out again under a set of layout rules. Here are the rules this one uses.

Where the name comes from

"Pretty printing" is a term from compiler design, and it is older than the web. A parser turns source text into a tree; a pretty printer walks that tree and writes it back out as text, applying layout rules as it goes. The output is semantically identical to the input and typographically different.

That is exactly what happens when you press Format above, and it is why the result is trustworthy: nothing is being matched with a regular expression and hopefully substituted. The markup is parsed, then printed.

The layout rules it applies

A pretty printer is defined by its rules. These are the ones in use here, in the order they matter.

One element per line, one indent per level. The baseline. Depth in the tree maps directly to horizontal position on the page.

Short inline content collapses. An element whose children are all text or inline tags, and whose single-line form fits within about 100 characters, stays on one line. So <li>Typography</li> is one row, not three.

Long text wraps at the indent. A paragraph of prose is broken at word boundaries and each continuation line gets the same indent as the first, so the block reads as a block.

Raw-text elements are opaque. <pre>, <textarea>, <script> and <style> keep their contents verbatim.

Attributes stay on the tag unless you ask otherwise. Tick Wrap long attributes and a tag that would run past roughly 90 characters gets one attribute per line instead.

Why idempotence matters

Run the printer on its own output and you get the same bytes back. That property is called idempotence, and it is the difference between a tool you can put in a workflow and a tool you have to babysit.

Without it, every developer who opens the file and saves it produces a diff, code review fills up with whitespace noise, and eventually someone bans the formatter. With it, formatting becomes invisible infrastructure — which is the goal.

$ format page.html > a.html
$ format a.html      > b.html
$ diff a.html b.html
(no output)

Questions about this tool

Related tools

Learn the why, not just the how

Longer reading on formatting, indentation and minification.