HTML Beautifier

HTML Beautifier – HTML Formatter and Pretty Printer

Minified HTML, markup generated by a CMS, or a template pasted from an email builder can be impossible to read. The HTML beautifier formats it into properly indented markup with one element per line where it makes sense. Because it uses Prettier, it also formats the CSS inside <style> tags and the JavaScript inside <script> tags.

How to format HTML

1. Paste your HTML or open an .html file. The Sample button loads a full page written on one line.
2. Pick indentation and line width.
3. Choose how whitespace is treated (see below) and whether the closing > of a tag with many attributes stays on the last attribute line.
4. Copy or download the formatted HTML.

Whitespace sensitivity

In HTML, whitespace between inline elements such as <a>, <span>, and <strong> is visible on the page. A careless formatter can add or remove spaces and change how text looks. Prettier offers three modes:

• Respect CSS display (default) – whitespace is only changed around block elements like <div> and <p>, never inside inline content.
• Strict – all whitespace is treated as significant; the output may look a bit unusual but is guaranteed to render identically.
• Ignore – maximum readability; whitespace may be changed everywhere.

What else is formatted

Long attribute lists are split one attribute per line, void elements are normalized, and embedded <style> and <script> blocks are formatted with the CSS and JavaScript formatters. Comments and <pre> contents are preserved.

Related HTML tools

Before deploying, compress the page with the HTML Minifier. For Angular templates use the Angular Formatter, for SVG markup the SVG Formatter, and for strict XML documents the XML Beautifier.