HTML Formatter — Beautify Messy or Minified HTML with Prettier

How to use the HTML formatter

1. Paste your HTML into the HTML box. A full page, a fragment or a single element all work.
2. Choose the Indent: 2 spaces, 4 spaces or Tab.
3. Pick a Line width of 80, 100 or 120 characters. Longer lines are wrapped where it is safe.
4. Choose how to treat Inline whitespace: Respect CSS display (safe), Strict: never change inline spacing, or Ignore: tidiest, may change spacing.
5. Copy the Formatted HTML or download it as formatted.html.

What it does and when to use it

HTML is often hard to read by the time you need to look at it. It may be minified onto one line, exported from a page builder, pasted from an email template, or edited by several people with different habits. Formatting puts every element on its own line with consistent indentation, so the structure of the page becomes visible at a glance.

Use it to:

• Read and debug the HTML of an email template or a CMS export.
• Find nesting mistakes, such as an unclosed div, by following the indentation.
• Tidy a snippet before you paste it into documentation or a code review.
• Make two versions of a file comparable before you diff them in the Diff Checker.

When you are ready to ship, go the other way with the HTML Minifier. To strip unwanted inline styles and attributes first, use the HTML Cleaner. To check the markup for errors, try the HTML Validator.

How it works

The formatter uses Prettier, a widely used open-source code formatter, loaded in your browser with its HTML, CSS and JavaScript plugins. Prettier parses your HTML into a tree, then prints it again with your chosen indent and line width. Because it works from a parsed tree rather than by search-and-replace, it handles attributes, comments and nested elements reliably.

The whitespace setting matters because HTML spacing is not always invisible. Between inline elements, such as a link next to some bold text, a line break shows up as a space. “Respect CSS display” follows each element’s default display type and only adds line breaks where they are safe. “Strict” never touches spacing around inline content. “Ignore” formats freely.

Worked examples

A minified list. <div><p>Hi</p><ul><li>a</li><li>b</li></ul></div> becomes a tree with each element on its own line: the paragraph and list indented two spaces inside the div, and each list item indented two more.

Four-space indent. A card with a heading and a paragraph, formatted with 4 spaces, places <h2>Order #1042</h2> four spaces in. The inline <strong> stays on the same line as its text, so no extra space is added.

Inline CSS. <style>body{margin:0;color:red}</style> is expanded into a readable rule, with margin: 0; and color: red; each on their own indented line.

Preformatted text. A <pre> block containing “ a” and “ b” keeps its exact spaces and line breaks.

Limits and tips

• Badly broken HTML is formatted the way a parser reads it, which may not be what you meant. Fix errors the validator reports first.
• Template syntax such as Handlebars or Jinja tags can confuse the HTML parser. Format the final HTML where possible.
• Very large documents can take a moment, because formatting runs on your device.