HTML Formatter

About this tool

HTML Formatter takes compressed, minified, or inconsistently indented HTML and rewrites it with clean, readable indentation. Choose 2-space, 4-space, or tab indentation and the formatter restructures the entire document tree accordingly — nesting child elements under their parents, aligning closing tags, and preserving attribute order on every element. The result is HTML that is easy to read in a diff, straightforward to debug in an editor, and ready to commit to version control with consistent style. Pasted markup from CMS exports, template engines, browser DevTools, or email builders frequently arrives as a single dense line. The formatter separates each element onto its own line without altering a single attribute, class name, inline style, or text node. It runs entirely in the browser so no markup containing passwords, API keys, or internal URLs ever reaches a server.

Why use it

• Readable Diffs in Code Review: Minified HTML produces single-line diffs that are impossible to review meaningfully. Formatting the HTML before committing it means every changed attribute or element shows up on its own line in your pull request.

• Instant Nesting Visualisation: Deep or irregular nesting is invisible in compressed markup. The formatter's indentation makes the entire element hierarchy visible at a glance, helping you spot unclosed tags or misplaced elements before they become bugs.

• Configurable Indent Width: Different teams have different style guides. Choose 2-space for compact output, 4-space for maximum readability, or tabs to match projects that rely on tab-based formatting enforced by EditorConfig or Prettier.

• Attribute Order Preserved: Unlike some formatters that reorder or strip attributes, this tool keeps every attribute exactly where it was — id before class before data-* — so the output is a pure formatting change, not a semantic one.

• No Build Step Needed: Projects that use plain HTML files without a preprocessor or Prettier integration still deserve consistent formatting. This tool delivers that with a simple paste-and-copy workflow requiring no configuration files.

• 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 input panel on the left side.
2. Select your preferred indentation style — 2 spaces, 4 spaces, or tabs — from the dropdown above the output panel.
3. The formatted HTML appears instantly in the output panel as you type or change settings.
4. Inspect the nesting structure to confirm the document tree matches your expectations before editing.
5. Click Copy to copy the formatted HTML to your clipboard.
6. Optionally click Download to save the result as a .html file with the same formatting applied.

When it helps

• When pasting HTML exported from a CMS, page builder, or design tool that outputs single-line markup.
• Before committing a template file to version control so future diffs are line-level and reviewable.
• 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 onboarding to an existing project with inconsistently formatted HTML across multiple template files.
• Before running an HTML linter or accessibility checker so error line numbers correspond to human-readable structure.

Examples

<div class="card"><h2 class="card-title">Hello World</h2><p class="card-body">This is a <strong>bold</strong> statement.</p><a href="/more" class="btn">Read more</a></div>

<div class="card">
  <h2 class="card-title">Hello World</h2>
  <p class="card-body">This is a <strong>bold</strong> statement.</p>
  <a href="/more" class="btn">Read more</a>
</div>

<nav><ul><li><a href="/">Home</a></li><li><a href="/tools">Tools</a></li><li><a href="/about">About</a></li></ul></nav>

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/tools">Tools</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<form action="/submit" method="post"><label for="email">Email</label><input type="email" id="email" name="email" required><label for="msg">Message</label><textarea id="msg" name="msg" rows="4"></textarea><button type="submit">Send</button></form>

<form action="/submit" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <label for="msg">Message</label>
  <textarea id="msg" name="msg" rows="4"></textarea>
  <button type="submit">Send</button>
</form>

Tips

• Paste minified HTML into the formatter before running it through an accessibility checker — audit tools report line numbers, and formatted output makes those numbers meaningful.
• Use 2-space indent for HTML email templates where total file size affects deliverability; the smaller indent keeps the formatted version compact.
• 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.