HTML Formatter / Beautifier

How to Use the HTML Formatter

1. Paste HTML into the input box - a full page, a minified template fragment, or the raw output of a server-rendered framework all work. The DOCTYPE, script, and style blocks are fine.
2. Choose indentation: 2 spaces (common in React and Vue projects), 4 spaces (classic HTML5 style), or a tab character. The setting applies the next time you click Format.
3. Click Format to indent every block element and put each tag on its own line, or Minify to collapse the document back into a compact single-line string.
4. Copy the output with the clipboard button. The textarea keeps a scrollable copy so you can compare the before and after without leaving the page.

What the Tool Does Under the Hood

The formatter tokenises the input into three kinds of nodes: opening tags, closing tags, and text runs. When it sees an opening tag it increments an indent counter and emits a newline; a closing tag decrements the counter before it prints. Void elements listed in the HTML Living Standard - <br>, <img>, <input>, <meta>, <link>, <hr>, <source>, and friends - never push the stack, because they cannot have children. Self-closing XML-style tags ending in /> are treated the same way.

Content inside <pre>, <textarea>, <script>, and <style> is preserved verbatim because reformatting those elements would change whitespace that is observable to users or to the JavaScript engine. Comments (<!-- -->) and the DOCTYPE declaration are emitted on their own line. The minify pass collapses runs of whitespace between tags to nothing, removes comments, and joins the document into one line.

Real Reasons to Use This

• Making sense of a server-rendered framework's output (Rails, Django, Laravel) when debugging an unexpected DOM structure.
• Preparing an email template for a CMS that ships HTML inline and benefits from minified markup.
• Normalising the output of a WYSIWYG editor before committing it to version control.
• Inspecting a single Web Component's rendered shadow DOM after copying it from Chrome DevTools.
• Generating a minimal reproduction for a bug report where indentation makes the structure obvious.
• Converting a one-line HTML snippet from a CDN into something you can comfortably read on a laptop screen.

Pitfalls and Edge Cases

• Tag soup. Legacy HTML lets you omit some closing tags (<li>, <p>, <td>). The formatter treats them as if they were nested, which can produce deeper indentation than the document's conceptual structure. The output still renders identically in the browser.
• Inline-sensitive whitespace. Spaces between <span> or <a> tags affect the rendered layout. Aggressive minification can join "Hello link" into "Hellolink" visually. Use a non-breaking space or a leading space inside the anchor when this matters.
• Conditional comments. Older Internet Explorer comments like <!--[if IE]> are preserved as plain comments; recent browsers ignore them regardless, so this is usually fine.
• Embedded SVG and MathML. The tool indents them like any other markup, including the self-closing nodes that use XML syntax.
• CDATA blocks. <![CDATA[ ... ]]> inside inline SVG survives the round-trip because the tokenizer treats it as opaque text.

HTML Specification Context

HTML is no longer a versioned spec - the current reference is the WHATWG HTML Living Standard, which defines the parser in algorithmic terms rather than as a grammar. That means the same input can be tokenised into different DOM trees depending on implicit-close rules for <table>, <ul>, or <dl>. Whitespace between block elements is collapsed by the browser during layout, so pretty-printing is purely a developer convenience: your rendered page looks identical whether it is indented with two spaces or crammed onto one line. The only places where whitespace is significant are inside <pre>, <textarea>, elements styled with white-space: pre, and the boundaries between inline formatting contexts.

When Other Tools Are Better

In an editor, Prettier's HTML plugin builds a real parse tree and handles edge cases like <a> nested inside block-level content, preserving tag omission rules, and word-wrapping long attribute lists. That is the right default for any project with a build step. Command-line tools like tidy or html-minifier-terser can additionally deduplicate attributes, collapse boolean attributes, or remove redundant quotes. This web tool is intentionally simpler - reach for it when you need to read a single-file minified page, beautify an email template, or minify a snippet for a transactional message without touching npm. For full-site optimisation, bake minification into your deploy pipeline.