UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

HTML Formatter

Beautify and indent raw HTML code

About HTML Formatter

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 HTML Formatter

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 HTML Formatter

  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 to use HTML Formatter

  • 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

Minified HTML document fragment

Input: <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>

Output: <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>

Navigation with nested lists

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

Output: <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 with input fields

Input: <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>

Output: <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

Does the formatter change any attribute values or text content?▾
No. The formatter only adds indentation and line breaks between elements. Every attribute, class, style, data value, and text node is passed through without modification.
Will it handle HTML5 documents with <!DOCTYPE html> and <head> correctly?▾
Yes. Full HTML documents are formatted from the doctype declaration through to the closing </html> tag, with <head> and <body> children correctly indented.
What happens to inline elements like <span> or <a> inside a paragraph?▾
Inline elements that appear mid-sentence are kept on the same line as their surrounding text to avoid introducing visible whitespace in the rendered output. Block elements always get their own line.
Does the formatter handle self-closing tags like <input> and <br>?▾
Yes. Void elements (br, hr, input, img, meta, link) are recognised and placed on their own line without an erroneous closing tag being added.
Can I format an HTML fragment rather than a full page?▾
Absolutely. You can paste any snippet — a single <div> tree, a <nav> block, or a partial template — and the formatter will structure it correctly without requiring a full document wrapper.
How does the formatter handle pre and script tags where whitespace matters?▾
Content inside <pre>, <script>, and <style> blocks is preserved verbatim and not re-indented, since altering whitespace inside these elements would change their meaning.
Does it support SVG or MathML markup embedded in HTML?▾
Inline SVG and MathML fragments are formatted using the same indentation rules as regular HTML elements, making complex icon SVGs much easier to read and edit.
Can I use tabs instead of spaces to match my project's EditorConfig setting?▾
Yes. Switch the indent selector to Tabs and the formatter will use a single tab character per nesting level, matching the default EditorConfig indent_style = tab setting.

Explore the category

HTML Minifier Minify HTML by removing comments and unnecessary whitespace while preserving valid markup. HTML Entities Encoder Decoder Encode and decode HTML entities in named/basic and numeric modes. JSON Formatter Format, validate and minify JSON Paste and Share Share text with a short link, expiry, optional max opens, password, and QR code JavaScript Minifier Minify JavaScript by removing comments, trimming whitespace, and outputting cleaner code instantly in your browser. Meta Tag Generator Generate essential HTML head tags for SEO and metadata in one place.
Base64 Images in HTML and CSS: When They Help and When They Hurt Embedding images as Base64 data URIs eliminates an HTTP request but increases file size by 33% and breaks caching. Here is when the trade-of Apr 2026 · 7 min How Browsers Render a Web Page: From HTML to Pixels A browser takes HTML, CSS, and JavaScript and turns it into pixels. The steps between those two points — parsing, layout, painting, composit May 2026 · 11 min Understanding the Critical Rendering Path and How to Optimize It The critical rendering path is the sequence of steps a browser must complete before showing the first pixel. Optimizing it is one of the hig May 2026 · 10 min

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.