How to use the html prettifier
- Paste your raw or minified HTML into the HTML input text area.
- Set the number of Indent spaces you prefer (the default is 2).
- The formatted output updates automatically as you type or paste.
- Copy the result from the Formatted HTML area for use in your editor.
How the formatting works
An html prettifier parses the source string into a sequence of tokens: opening tags, closing tags, self-closing tags, comments, doctypes, and text nodes. It then walks through those tokens while tracking a depth counter. Each opening tag increases the depth, each closing tag decreases it, and self-closing tags leave it unchanged.
The indent string is simply the space character repeated depth * indentSize times. For example, with an indent size of 2, a token at depth 3 receives 6 leading spaces. Text nodes are trimmed of surrounding whitespace; if they contain non-whitespace characters they are printed on their own line at the current depth plus one.
Content inside <pre>, <textarea>, <script>, and <style> elements is treated as raw text. The formatter captures everything between the opening and closing tags verbatim, preserving all original whitespace and line breaks, because altering that content would change how the page renders or executes.
When to use an html prettifier
Developers reach for an html prettifier in several common situations. Minified production HTML strips all unnecessary whitespace to reduce file size, making it nearly impossible to read. Pasting that single-line string through a formatter restores the visual hierarchy immediately.
Server-side templating engines often generate markup with inconsistent nesting. Running the output through a formatter reveals structural mistakes such as unclosed tags or misplaced elements. Code reviews also benefit: rather than parsing dense diffs by eye, reviewers can format both versions and compare them cleanly.
For learning purposes, beginners studying generated DOM structures can paste view-source output into the tool to see exactly how elements nest inside one another.
Prettifying versus minifying
Prettifying and minifying are inverse operations. An html prettifier adds whitespace, line breaks, and indentation to maximize human readability. A minifier does the opposite: it collapses multiple spaces into one, removes line breaks, and strips optional quotes to produce the smallest possible byte count for network transfer.
In a typical workflow, developers write readable HTML during development, optionally run it through a formatter to enforce team style rules, and then apply a minifier as a build step before deployment. You can use the HTML minifier on this site to reverse the process when you need to shrink your markup for production.
Common edge cases
Not all HTML is perfectly well-formed. A robust formatter must handle several edge cases gracefully. Unclosed tags cause the depth counter to drift upward, resulting in excessive indentation for subsequent elements. The formatter used here processes tokens sequentially without attempting to auto-close tags, so malformed input produces output that reflects the actual structure provided.
Attributes containing angle brackets, such as <div data-expr="a < b">, can confuse naive parsers that split on every < character. This tool uses a state machine that tracks whether it is currently inside a quoted attribute value, preventing false token boundaries.
Inline text mixed with inline elements, like <p>Hello <strong>world</strong></p>, is formatted with each node on its own line. While this differs from how some editors keep inline content together, it guarantees consistent indentation regardless of the nesting depth.
Worked examples
Each result below was produced by the same code the tool runs, so you can check your own numbers against them.
| Example | Input | Result |
|---|---|---|
| Minified div | HTML input: <div><p>Hello</p></div>; Indent spaces: 2 | <div> / <p> / Hello / </p> / </div> |
| Nested list | HTML input: <ul><li>One</li><li>Two</li></ul>; Indent spaces: 4 | <ul> / <li> / One / </li> / <li> / Two / </li> / </ul> |
| Self-closing tags | HTML input: <div><img src="a.png"><br><input type="text"></div>; Indent spaces: 2 | <div> / <img src="a.png"> / <br> / <input type="text"> / </div> |
FAQ
Does this html prettifier upload my code to a server?
No. All formatting happens locally in your browser using JavaScript. Your HTML is never sent over the network.
Will formatting change how my page renders?
In most cases, no. HTML ignores extra whitespace between block elements. However, adding line breaks between inline elements can introduce small visual gaps. The formatter preserves content inside pre, textarea, script, and style tags exactly as written.
Can I format broken or invalid HTML?
Yes. The formatter processes whatever tags and text you provide without validating the document against the HTML specification. Severely malformed input may produce unexpected indentation, but it will not crash.
What indent size should I use?
Two spaces is the most common convention in modern web development. Four spaces is also widely used. Choose whichever matches your project style guide.
Does it handle XML or SVG?
It is designed for HTML. It handles self-closing tags and basic XML-like syntax, but it applies HTML-specific rules such as treating known void elements as self-closing even without a trailing slash.
How do I reverse the formatting?
Use the companion HTML minifier to strip whitespace and compress the formatted HTML back into a compact form.