How to format HTML
- Paste your HTML into the HTML input box, or press Upload .html to open a file. Full pages, email templates and snippets all work.
- It is formatted as you type. Choose 2 spaces, 4 spaces or Tab under Indent, and tick Lowercase tags or Wrap attributes if you want them.
- Press Minify to strip whitespace down to a single line instead.
- Press Copy or Download to take the result with you. Ctrl+Enter (Cmd+Enter on a Mac) re-runs the last action.
HTML pretty print example
A minified page — the kind a bundler or CMS often produces — is hard to read on one or two lines:
<!DOCTYPE html><html><head><title>Sample</title></head><body><div class="card"><h1>Hi</h1><p>Hello <b>world</b>!</p></div></body></html>Formatted with 2 spaces, each element that holds only other elements gets its own indented line:
<!DOCTYPE html>
<html>
<head>
<title>
Sample
</title>
</head>
<body>
<div class="card">
<h1>
Hi
</h1>
<p>
Hello <b>world</b>!
</p>
</div>
</body>
</html>Notice that Hello world! stayed on one line inside its <p>: when an element mixes text with inline markup, this formatter keeps that run together instead of exploding every inline tag onto its own line, which is what makes formatted HTML still readable as prose.
HTML minify: shrink it for production
Minifying collapses every run of whitespace between tags to a single space — it never removes it outright, because a browser's own layout already treats any whitespace run outside <pre> as equivalent to one space, so this is a lossless transform, not a guess. A typically-indented snippet:
<div class="card">
<h1>Hello</h1>
<p>Some text with a <a href="#">link</a> inside.</p>
</div>shrinks from 97 to 93 characters:
<div class="card"> <h1>Hello</h1> <p>Some text with a <a href="#">link</a> inside.</p> </div>Notice a single space remains wherever a line break used to be (for example right after <h1>Hello</h1>) rather than the tags being jammed directly together — that space is invisible once a browser renders it, so nothing about the page changes. Use minified HTML when a template is inlined into an email, an API response or a build artifact and every byte counts; use formatted HTML for code review, templates you'll edit by hand, and version control diffs.
Inline vs block: how mixed content stays readable
Real HTML almost always mixes plain text with inline tags like <b>, <a> and <em> in the middle of a sentence:
<p>Ada Lovelace wrote notes on <em>Babbage's</em> Analytical Engine.</p>Formatted:
<p>
Ada Lovelace wrote notes on <em>Babbage's</em> Analytical Engine.
</p>A formatter that indented every single tag onto its own line would turn that one sentence into half a dozen fragmented lines, technically "formatted" but harder to read than the original. This tool only splits an element onto multiple lines when its direct children are themselves other elements (or comments) with no text mixed in — a genuinely block-shaped structure like a list of <li>s or a page's <head>.
What's preserved: script, style, pre, textarea, comments
<pre>, <textarea>, <script> and <style> contents are always copied through byte-for-byte, indentation and all, because their whitespace is significant (a <pre> block renders exactly what's inside it) or because reindenting someone else's JavaScript/CSS formatter's output would just fight with it:
<div><pre>function add(a, b) {
return a + b;
}</pre></div><div>
<pre>function add(a, b) {
return a + b;
}</pre>
</div>Regular HTML comments, including conditional comments written for old versions of Internet Explorer, are also kept exactly as written and never parsed as markup:
<!--[if lt IE 9]><script src="html5shiv.js"></script><![endif]-->Lowercase tags and wrap attributes
HTML tag names are case-insensitive, so <DIV> and <div> render identically — but a mix of cases (common after a find-and-replace, or HTML generated by an older tool) is harder to scan and to grep for. Tick Lowercase tags and this:
<DIV CLASS="Box"><P>Hi</P></DIV>becomes:
<div CLASS="Box">
<p>
Hi
</p>
</div>Attribute names, values and quote style are always left exactly as written; only the tag name's case changes. Wrap attributes is the opposite kind of tidy-up — it puts each attribute of a busy tag onto its own line so a diff shows exactly which one changed:
<input type="text" name="q" placeholder="Search…" required><input
type="text"
name="q"
placeholder="Search…"
required
>HTML formatter vs beautifier vs prettifier vs minifier
- HTML formatter, beautifier and prettifier: three names for the same thing — adding line breaks and indentation so HTML is easy to read. This tool's Format button.
- HTML minifier: the reverse — collapsing whitespace to make the file smaller for production. This tool's Minify button.
- Neither one is an HTML validator: both only ever touch whitespace (and, optionally, tag case), never tags, attributes or content, and neither checks your markup against the HTML specification.
Does this replace an HTML validator?
No, on purpose. This tool tokenizes HTML the way a browser would — leniently, tolerating unquoted attributes, unclosed tags and mismatched tag case without ever throwing an error — so that even badly broken markup still gets indented as sensibly as possible instead of blocking you with a wall of errors. That leniency is exactly what stops it from being a validator: it will happily reformat a page with a missing </div>, whereas a real validator like the W3C Nu HTML Checker is designed to catch that. Format the markup here first to make it readable, then run it through a validator if you need to certify it's spec-compliant.
More developer tools
- HTML viewer: paste the formatted result to see it rendered live in a sandboxed preview.
- XML formatter & validator: the same pretty print, minify and validate workflow for XML, which — unlike this tool — does check well-formedness.
- JSON formatter & validator: format, minify and validate JSON with exact error locations.
- Diff checker: compare two versions of a template or page side by side.
Frequently asked questions
How can I beautify my HTML code?
Paste it into the box above, or press "Upload .html" to open a file from your computer. It is beautified as you type, with 2 spaces, 4 spaces or a tab under Indent. Press Copy or Download to take the result with you; nothing is uploaded to a server.
What is the best free HTML formatter?
For a quick, private reformat with nothing to install, a browser tool like this one is fastest and never uploads what you paste. Editors such as VS Code (Shift+Alt+F, or Shift+Option+F on a Mac) and Prettier go further for a whole project, with consistent formatting on every save.
How do I reformat HTML code that is all on one line?
Minified or hand-mangled HTML — everything jammed onto one or two lines — is what "format" and "beautify" are for: paste it here and it is reindented based on tag nesting, with each element on its own line unless it is inline text mixed with a few tags.
How can I format text in HTML?
If you mean adding line breaks and indentation to HTML source so it's readable, that's exactly what this tool does. If you mean styling text on a page (bold, italic, colour, font size), that's CSS, not formatting: wrap the text in <strong>, <em> or a styled <span> instead.
Does this HTML formatter validate my markup?
No, and this is worth being upfront about: it formats HTML, it does not validate it against the HTML specification. It tokenizes leniently (unquoted attributes, unclosed tags and mismatched case are all tolerated, the way a browser would be forgiving) and never throws an error, so a badly broken page still gets indented as sensibly as possible. For strict validation, use the W3C Nu HTML Checker or your editor's HTML linter.
What is the difference between an HTML formatter, beautifier, prettifier and minifier?
"Formatter", "beautifier" and "prettifier" are three names for the same job: adding indentation and line breaks so HTML is easy to read (this tool's Format button). A "minifier" does the opposite — it strips out the whitespace a beautifier adds, to make the file smaller for production (this tool's Minify button). Both keep every tag, attribute and character of content; only whitespace between tags changes.
Does formatting or minifying change my HTML, attributes or content?
No. Only whitespace between tags is added or removed. Attribute order, attribute quoting style ("..." or '...'), tag case (unless you tick Lowercase tags) and every character of text, comments and script/style content are kept exactly as written.
What happens to <script>, <style>, <pre> and <textarea>?
Their contents are copied through untouched, on purpose. Reindenting JavaScript or CSS inside <script>/<style> would fight with your existing formatter for those languages, and whitespace inside <pre> or a <textarea>'s value is part of what it displays, not decoration. Minify collapses whitespace everywhere else but leaves these four exactly as written too.
What do the Lowercase tags and Wrap attributes options do?
Lowercase tags rewrites a tag name like <DIV> to <div> (attribute names, values and quote style are left exactly as written). Wrap attributes puts each attribute of a tag that has more than one onto its own indented line, which makes a long opening tag easier to scan and easier to diff. Both are off by default so Format only touches whitespace unless you turn them on.
Is my HTML uploaded anywhere?
No. Formatting and minifying both run in your browser with JavaScript; nothing you paste or upload is sent to a server, logged or saved. Only your settings (indent, lowercase tags, wrap attributes, auto-format) are remembered on your device.