HTML Formatter

About this tool

HTML Formatter takes compressed or single-line HTML and rewrites it with two-space indentation. Paste markup and click Format HTML: whitespace between tags is removed, then every tag and every text node goes on its own line, one level deeper inside each open element and one level back at its closing tag. Attributes are copied exactly as written. Doctype and comment lines and the void elements br, hr, img, input, meta and link do not add a level. The formatter is a simple tag scanner rather than a full HTML parser, so the output is for reading structure, not for replacing your source: inline elements such as <strong> or <a> are split onto separate lines, content inside <pre>, <script>, <style> and <textarea> is re-indented like everything else, and tags written with /> (common in SVG) or other void elements such as <source> push the indentation one level too deep. It runs entirely in the browser so no markup reaches a server.

Why use it

• See the Nesting at a Glance: Deep or irregular nesting is invisible in compressed markup. One element per line with two-space indentation shows the hierarchy immediately.

• Spot Unclosed Tags: When indentation keeps drifting right or never returns to the left margin, an element is probably unclosed or a void element was written as a container.

• Attributes Untouched: Attribute names, values and order are copied exactly as written, so ids, classes and data-* values stay easy to search for.

• Readable Snippets for Bug Reports: Turn a single-line HTML blob copied from DevTools or a CMS export into an indented outline you can paste into an issue or chat.

• Safe for Sensitive Markup: HTML from admin templates, email campaigns, or internal tools often contains tokens and IDs that shouldn't leave your network. Everything runs locally in your browser — nothing is sent to any server.

How to use

1. Paste your raw or minified HTML into the HTML to format box.
2. Click 'Format HTML' to indent it with two spaces per nesting level.
3. Read the nesting in the Formatted HTML box to see which elements sit inside which.
4. Click 'Copy result' to copy the formatted HTML.
5. Click 'Clear' to empty both boxes.

When it helps

• When pasting HTML exported from a CMS, page builder, or design tool that outputs single-line markup.
• When reviewing an HTML email or landing-page export and you need to find where each section starts and ends.
• When debugging a third-party HTML snippet and needing to understand its nesting structure before modifying it.
• After copying HTML from browser DevTools to paste into documentation or a bug report in readable form.
• When checking whether a minified snippet has balanced opening and closing tags.
• When learning how a page is structured by reading its markup as an indented outline.

Examples

<div class="card"><h2 class="card-title">Hello World</h2><p>Read <a href="/more">more</a></p></div>

<div class="card">
  <h2 class="card-title">
    Hello World
  </h2>
  <p>
    Read
    <a href="/more">
      more
    </a>
  </p>
</div>

<ul><li>One</li><li>Two</li></ul>

<ul>
  <li>
    One
  </li>
  <li>
    Two
  </li>
</ul>

<!DOCTYPE html><html><head><title>Demo</title></head><body><p>Hi</p></body></html>

<!DOCTYPE html>
<html>
  <head>
    <title>
      Demo
    </title>
  </head>
  <body>
    <p>
      Hi
    </p>
  </body>
</html>

Tips

• If indentation drifts to the right and never comes back, look for a self-closing /> tag or a void element such as <source> just above where the drift starts.
• Keep your original markup for production; the formatted copy drops whitespace between tags and splits inline elements, which can change how text renders.
• If the formatted output looks strange, check for mismatched or unclosed tags — the formatter exposes nesting bugs that are invisible in compressed markup.
• Format HTML before diffing two versions manually; indentation-normalised files produce diffs that highlight only real content changes.
• For Jinja, Handlebars, or other template languages mixed with HTML, format the rendered output rather than the source template to see the actual structure.

Frequently Asked Questions

Glossary

Indentation

The use of leading spaces or tabs before each line of code to visually represent the nesting depth of each element in the document tree.

Void Element

An HTML element that cannot have child nodes and therefore has no closing tag — including <br>, <hr>, <img>, <input>, <link>, and <meta>.

DOM Tree

The browser's in-memory representation of an HTML document as a hierarchy of nodes. The formatter's indentation mirrors this tree structure visually.

Attribute Order

The sequence in which attributes appear on an HTML opening tag. While order has no semantic effect, consistent ordering aids readability and reduces noisy diffs.

EditorConfig

A project-level configuration file (.editorconfig) that standardises formatting settings like indent style and size across different editors and IDEs.

Pretty-Printing

The general technique of reformatting source code with consistent indentation, line breaks, and spacing to improve human readability without changing program behaviour.