Development Tools
HTML Formatter — Beautify & Indent Markup Instantly
Beautify messy or minified HTML free with automatic 2-space indentation. Paste, format, and copy clean markup in seconds — no signup required.
HTML Formatter on FYN Tools is a free Development Tools utility. Open HTML Formatter in your browser — no signup required. Paste minified or poorly indented HTML, click Format, and get properly nested markup with 2-space indentation and correct handling of self-closing tags like <br>, <img>, and <input> — processed entirely in your browser. Related: HTML Live Preview.
Privacy & processing: HTML formatting runs in your browser using a tokenizer that reads your markup and re-indents it. Nothing you paste is sent to a server.
TL;DR: Paste minified or poorly indented HTML, click Format, and get properly nested markup with 2-space indentation and correct handling of self-closing tags like <br>, <img>, and <input> — processed entirely in your browser.
Reviewed by FYN Tools Editorial · Guides ·
Data input / output
| Inputs | HTML markup pasted or typed into the editor, including minified or single-line HTML |
|---|---|
| Outputs | Beautified HTML with 2-space indentation per nesting level and correct self-closing tag handling |
| Formats | HTML text; recognizes standard self-closing tags (br, hr, img, input, meta, link, area, base, col, embed, source, track, wbr) |
| Limits | This tool beautifies/indents markup; it does not minify or validate HTML against a spec |
| Processing | Client-side (browser) |
How to Use the HTML Formatter
- Paste your HTML — minified, copy-pasted from view-source, or just poorly indented — into the input box.
- Click Format to re-indent the markup with two spaces per nesting level.
- Review the formatted output on the right or below the input.
- Click Copy to grab the beautified HTML for pasting into your editor.
- Click Reset if you want to clear both the input and output and start over.
What is a HTML Formatter?
This formatter tokenizes your HTML into opening tags, closing tags, and text content, then rebuilds it with two-space indentation that increases after each opening tag and decreases before each closing tag. It correctly recognizes standard self-closing tags — br, hr, img, input, meta, link, area, base, col, embed, source, track, and wbr — so it does not add unnecessary indentation after them.
It is a beautifier, not a linter: it will indent whatever tag structure you give it without checking whether the HTML is spec-valid or whether tags are properly closed. That makes it fast for cleaning up minified markup pulled from a live site’s view-source, or for making a single-line HTML string readable before you edit it.
Minified or copy-pasted HTML often arrives as one long line with no indentation, making nested structure impossible to read at a glance. This formatter strips redundant whitespace between tags, then walks the token stream tracking nesting depth, adding two spaces per level for each opening tag and removing two spaces before each matching closing tag. Self-closing tags do not increase the indent level since they have no matching closing tag to track.
How it works
You set code, css values, or structured text in the editor in the live panel. HTML Formatter then format and beautify HTML code for better readability. Results show as formatted / generated code you can copy.
Explore more tools on our site.
Usage scenarios
- Unminify production HTML dumps: Paste a single-line view-source dump from Chrome and expand it so you can find the offending <div> before filing a layout bug.
- Email template review: Beautify table-based newsletter HTML so nested <td> and inline styles are reviewable in a PR without fighting minified noise.
- CMS paste cleanup: Editors often paste Word/Google Docs HTML with erratic spacing. Format first, then strip unused spans in your editor.
- Student assignment readability: Before grading, auto-indent submitted index.html files so nesting depth and indentation style are visible at a glance.
Input / Output Examples
Input
<div class="card"><h1>Hi</h1><p>Welcome<em>friend</em></p></div>
Output
<div class="card"> <h1>Hi</h1> <p>Welcome<em>friend</em></p> </div>
Input
Minified homepage: <!doctype html><html><head><title>X</title></head><body><main id="app"></main></body></html>
Output
Indented doctype → html → head/title → body/main with one tag per logical level
Frequently Asked Questions
Does formatting change how the page renders?+
In normal HTML, extra whitespace between tags does not change layout. Rare cases (preformatted text or sensitive inline spacing) should be checked in Live Preview after formatting.
Can it format HTML that includes <script> and <style>?+
Yes — embedded CSS/JS stay inside their tags. For dedicated CSS/JS cleanup use CSS Minifier or JavaScript Minifier after you finish HTML structure work.
Will the formatter fix invalid HTML?+
It prioritizes readability, not full HTML5 error repair. Invalid nesting may still be invalid — use the indented view to spot problems faster.
Is my HTML uploaded when I format it?+
Formatting is designed to run in your browser session for this tool. Avoid pasting secrets (API keys in inline scripts) onto shared machines.
What is the difference between format and minify?+
Format adds indentation for humans. Minify removes whitespace for transfer size. Beautify here, minify later in your build pipeline if needed.
Key Features
- Two-space auto-indentation
- Correct self-closing tag handling
- One-click copy of formatted output
- Reset button to clear input and output
Benefits
Turn unreadable single-line HTML into properly nested, readable markup in one click.
Spot structural nesting issues visually instead of counting tags manually.
Prepare clean code snippets for documentation or tutorials quickly.
When to Use HTML Formatter
- Cleaning up HTML copied from a browser’s view-source or DevTools that arrived as one unreadable line
- Making minified production HTML readable before debugging a layout issue
- Formatting a code snippet before pasting it into documentation or a tutorial
- Quickly checking whether tags are nested the way you expect by seeing the indentation visually
Advantages
- Handles standard self-closing tags correctly without extra configuration
- Two-space indentation matches common HTML style guides
- Runs entirely in your browser with instant results
- One-click copy and reset controls
Tips
- This tool beautifies structure but does not validate HTML — run a validator separately if you need spec compliance checked.
- Self-closing tags like <img> and <br> will not increase indentation for what follows, since they have no closing tag.
- Format before diffing two versions of a page’s markup so the diff reflects real structural changes, not just whitespace.
Common Mistakes
Expecting the formatter to fix invalid or unclosed tags — it indents based on the tags you provide, it does not correct them.
Assuming this tool minifies HTML — it only beautifies (adds indentation); use a dedicated minifier for the opposite.
Pasting HTML with inline scripts expecting JavaScript-specific formatting — this tool focuses on tag structure.
Summary
Paste minified or messy HTML above and get properly indented, readable markup in one click — the tool beautifies structure only, so pair it with a validator if you also need spec compliance checked.