HTML Tools
HTML Formatter & Beautifier
Prettier-quality HTML formatting — embedded CSS and JavaScript formatted too, with a live preview one click away.
In short
Format and pretty print HTML online with prettier-quality output: indentation, attribute wrapping, embedded CSS/JS formatted too. Live preview. Free.
By NaveenKumar T · Updated
Learn: HTML Entities Explained: When to Escape &, <, > and Quotes
- Prettier formatting engine
- Formats embedded CSS & JS
- Live sandboxed preview
Runs entirely in your browser — nothing you paste or open here is uploaded, logged, or stored.How we handle data →
Example
HTML Formatter: input and output
A minified timetable page with an inline stylesheet and script, formatted at two-space indentation.
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Ferry timetable</title><style>body{font-family:system-ui;margin:0}.dep{color:#0a7}</style></head>
<body><h1>Ferry timetable</h1><table><tr><th>Route</th><th>Departs</th></tr><tr><td>Pier 3 → Isle of Kerr</td><td class="dep">08:15</td></tr></table>
<script>document.querySelector(".dep").title=new Date().toDateString()</script></body></html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ferry timetable</title>
<style>
body {
font-family: system-ui;
margin: 0;
}
.dep {
color: #0a7;
}
</style>
</head>
<body>
<h1>Ferry timetable</h1>
<table>
<tr>
<th>Route</th>
<th>Departs</th>
</tr>
<tr>
<td>Pier 3 → Isle of Kerr</td>
<td class="dep">08:15</td>
</tr>
</table>
<script>
document.querySelector(".dep").title = new Date().toDateString();
</script>
</body>
</html>
Prettier put each CSS declaration on its own line, added the missing semicolon in the script and re-indented the table — without inserting elements the parser implies, such as <tbody>.
Learn more
What good HTML formatting looks like
HTML formatting is harder than it looks: whitespace is sometimes significant (between inline elements), attributes deserve wrapping when long, and embedded CSS and JavaScript are different languages with their own rules. This tool uses the prettier engine — the same formatter most front-end teams run in CI — so the output matches what your toolchain would produce.
Server-generated and CMS-exported markup arrives minified or chaotically indented; one pass here makes it reviewable, diffable, and debuggable.
Where formatted HTML pays off
Three places, daily: code review (diffs of formatted markup show the actual change instead of whitespace churn), email development (where a hundred nested tables become navigable once indented), and debugging hydration mismatches in React/Vue apps — comparing server-rendered and client-rendered markup is only feasible when both sides are formatted identically. The embedded-language support matters more than it sounds: a page's <style> and <script> blocks formatted by the same engine means one tool covers the whole document.
The preview tab closes the loop — after formatting markup from an unfamiliar source, one click confirms it still renders as intended before you commit it anywhere.
Pretty-print HTML
Pretty printing HTML and formatting it are the same operation, and this page does both: paste a minified document — a View Source dump, a CMS export, an email template that arrived on one line — press Format, and the document tree becomes visible again. That is the workflow the page exists for. Right-click a page doing something you want to understand, copy the wall of markup, print it here, and suddenly you can see where the nav sits, how the pricing table is structured, and which meta tags the site ships. SEO practitioners use the same loop to inspect a competitor's structured data; email developers use it to dissect a template that renders correctly in a difficult client.
Naive prettifiers break on exactly one thing, and it is worth knowing why this one does not: whitespace between inline elements is significant in HTML. A regex printer that puts every tag on its own line inserts a visible space between `</a>` and the punctuation that followed it, and the pretty-printed markup no longer renders like the original. Prettier knows which elements are inline and keeps their whitespace intact, so the output is not just readable — you can copy a subtree back out and it renders exactly as it did before.
Two more behaviours follow from using a real engine. Text inside block elements is re-flowed at the 80-column print width, breaking only at existing spaces, which is invisible in a browser because HTML collapses runs of whitespace anyway. And the content of `<pre>` and `<textarea>` is left byte-for-byte untouched, line breaks and indentation included. The indentation option in the rail changes nesting depth only; it never touches text. When you are done reading and want the payload small again, HTML Minify reverses the trip.
| Part of the document | What happens | Why |
|---|---|---|
| Whitespace between block elements | Rewritten as indentation | Insignificant to rendering |
| Whitespace around inline elements | Preserved | Significant — removing it changes rendering |
| Text inside block elements | Re-flowed at 80 columns | HTML collapses whitespace runs anyway |
| `<pre>` and `<textarea>` contents | Untouched, byte for byte | Whitespace is significant inside them |
| `<style>` and `<script>` contents | Formatted as CSS and JavaScript | Same engine, correct sub-parser |
| Attribute order and values | Unchanged | Order carries no meaning; values are data |
| Long attribute lists | Wrapped one per line | Readability at the print width |
| Omittable end tags (`<p>`, `<li>`) | Written explicitly | Makes nesting unambiguous |
| Implied elements (`<tbody>`) | Not inserted | The formatter prints your document, not the parser's |
| A stray `</div>` with no opener | Reported as an error with a position | Guessing would silently change structure |
Help
Frequently asked questions
Everything you need to know about the HTML Formatter.
01How do I use the HTML Formatter?
Paste your HTML (or load a file/URL) and press Format. The markup re-indents with industry-standard prettier rules — including <style> and <script> contents. Switch the output to Preview to see it rendered.
02Does formatting change how my page renders?
Effectively no: the formatter is whitespace-aware, preserving significant whitespace (inside <pre>, around inline elements where it matters) while normalizing everything else. The Preview mode exists precisely so you can confirm the rendered result is unchanged.
03Does the formatter fix broken markup, like an unclosed <div>?
It repairs what browsers repair and refuses the rest. Elements whose end tag HTML lets you omit — <p>, <li>, <option> — are closed explicitly in the output, and a <tbody> the parser implies is not inserted. A closing tag with no matching open element, the classic stray </div>, is a syntax error reported with its line and column rather than guessed around. That makes Format a usable smoke test, but the HTML Validator gives the clearer diagnosis for structure problems.
Keep working
Related tools
HTML Minify
HTML Tools
HTML Validator
HTML Tools
HTML Viewer
HTML Tools
XML Formatter
Re-indent any XML document into clean, readable markup — comments and CDATA preserved, validation built in.
Angular Formatter
Template-aware formatting for Angular — *ngFor, bindings, pipes and @if blocks handled as syntax, not text.
CSS Formatter
One stylesheet workspace, three engines: prettier for canonical formatting, js-beautify for unminifying broken bundles, and a minifier for the compact form — pick the mode in the rail.
Learn the format
Related guides
HTML Entities Explained: When to Escape &, <, > and Quotes
Which characters to escape in HTML text, attributes, URLs and scripts, how named, decimal and hex references differ, and why you keep seeing &amp;.
9 min readGuide · Data FormatsHow to Convert Excel to JSON (Without Writing Code)
Turn Excel or Google Sheets data into clean JSON in under a minute: paste cells directly or export CSV — with typed numbers, booleans, and proper quoting.
2 min readGuide · Developer ToolsFreeFormatter Alternatives (2026): Where Its Tools Went
FreeFormatter.com has been retired and its tool pages now return 404. A verified map of where each formatter, validator, escaper and encoder moved.
6 min read