About the HTML Pretty Print
Indenting is the easy half of readable markup. The half that decides whether a diff is reviewable is what happens to elements carrying eight attributes, and that is what this page gives you control over. Keep them on one line for compact output, put one per line for a column that reviews cleanly, align that column under the first attribute, or expand the whole tag into a block with the closing bracket on its own line. The last two styles are what most component-heavy codebases settle on.
Indentation runs at two spaces, four spaces or a tab, and unlike the default formatter here the <head> and <body> elements are indented inside <html>, which many house styles require. Blank lines between blocks can be kept as one, kept as two for airy templates, or removed entirely. Ticking lowercase tag names rewrites legacy uppercase markup such as <TABLE> and <BR> without touching attribute values, text or anything inside a string.
Whitespace-sensitive elements are excluded from the rewrite, so <pre>, <textarea> and <code> keep their exact contents. The status line reports the line count and the size after printing. For the standard two space treatment with fewer knobs, the HTML Formatter is quicker, and the HTML Cleaner deals with the junk that indentation alone cannot fix.
How to use
- Paste minified or badly indented HTML on the left.
- Choose an indent, then decide how attributes should be laid out.
- Copy the printed markup, or press Download to save it as a file.
Common questions
- What is the difference between the four attribute settings?
- Keep on one line leaves the tag as written. One per line starts each attribute on a new line at a fixed indent, aligned puts them in a column under the first attribute, and expanded block also moves the closing bracket to its own line.
- Will lowercasing tag names break my template syntax?
- Only tag names are rewritten, and the change is limited to the characters right after the opening angle bracket. Attribute values, text nodes and template expressions are untouched.
- Why did my pre block keep its odd spacing?
- Whitespace inside pre, textarea and code is meaningful, so those elements are excluded from reindentation on purpose.
- Does wrapping at a column count break long attribute values?
- No. Wrapping happens between attributes and between inline elements, never inside a quoted value.