Format, beautify and organize HTML code instantly with customizable formatting options and syntax validation. Everything runs locally in your browser.
0 B → 0 B
Input
258
Formatted
0
The result appears here as you type.
Nothing to report
Every tag is closed, ids are unique and the nesting is legal.
0 elements · 0 unique tags · 0 lines · 0 B
0 errors · 0 warnings · <1 ms
Formatted in your browser — nothing is uploaded.
Everything happens locally in your browser. Your HTML is never uploaded.
What is HTML formatting?
HTML formatting is rewriting markup so its structure is visible — one element per line, each nested level indented, attributes laid out predictably. The document that comes out is the same document; only the whitespace differs.
Before
1<div class="card"><h2>Title</h2><p>Some text with <a href="/x">a link</a>.</p></div>
After
1<div class="card">2 <h2>Title</h2>3 <p>Some text with <a href="/x">a link</a>.</p>4</div>
Notice what did not happen: the link stayed on the same line as the text around it. That is not a stylistic preference — it is the constraint that makes HTML formatting harder than it looks, and the next section explains why.
Why format HTML code?
Because nesting is the only thing HTML expresses, and unindented markup hides it completely. A missing </div> in a wall of tags is invisible; in an indented document it is a line that does not line up.
Structure becomes visible. Depth is the whole meaning of a document tree, and indentation is how you see it.
Diffs become meaningful. Consistently formatted markup means a change of one attribute is a change of one line in a diff checker or a pull request, rather than a reflowed block nobody can review.
Errors surface. Tags closed in the wrong order look fine unformatted and obviously wrong once indented.
The catch: whitespace in HTML is not free
Most languages ignore the whitespace between tokens. HTML does not. Whitespace between inline elements is collapsed to a single space and then rendered, so where a formatter chooses to break a line changes what the page looks like.
These render differently
1<span>a</span><span>b</span> renders as ab23<span>a</span>4<span>b</span> renders as a b
A formatter that puts every tag on its own line inserts spaces that were never in your document. That is why this one only ever breaks a line where the source already had whitespace — a newline collapses to the same single space, so breaking there changes nothing.
The guarantee is tested rather than asserted: for every sample and every case in the suite, minifying the original and minifying the formatted output must produce byte-identical results. If formatting ever added or removed a rendered space, that test fails.
HTML formatting features
Proper indentation
Two spaces, four spaces or tabs, applied by nesting depth. Attributes stay on one line until the tag would pass your wrap width, then split one per line — or always split, if you prefer diffs where one changed attribute is one changed line.
Readability without rewriting
Four kinds of content are written back exactly as they arrived, because reformatting them would change something real:
<pre> and <textarea> — whitespace inside them is content, not layout. Re-indenting visibly changes the page.
<script> and <style> — another language entirely. A JavaScript template literal carries its leading whitespace as part of the string, so shifting those lines changes what the program produces. To tidy those blocks, lift them out and run them through the JavaScript formatter or the CSS formatter.
Syntax highlighting
Tags, attributes, values, comments, doctypes and character references each get their own colour, in the editor and in the result. Inside a <script> the highlighter stops treating angle brackets as markup, so a < b in your JavaScript is not painted as a tag.
Validation
Missing closing tags, tags closed out of order, duplicate ids, duplicate attributes, illegal nesting, unclosed quotes, obsolete and unknown elements. Each finding has a line, a column and a fix, and clicking one moves the cursor there.
Duplicate ids are worth calling out: nothing reports them at runtime. getElementById silently returns the first match, and a label’s for silently points at the wrong control.
Live preview
Rendered at mobile, tablet or desktop width. The preview is sandboxed with scripts disabled and no access to this page, because markup you paste in is untrusted input. Script-driven pages therefore show their structure rather than their behaviour — the right trade when you are checking layout.
Supported HTML elements
Every element in HTML5, plus custom elements, plus the obsolete ones you will meet in old documents. Several categories need specific handling:
Semantic elements.header, nav, main, article, section, aside, footer, figure — block-level, so each gets its own line and its children are indented beneath it.
Void elements. The fourteen that never have content — img, br, hr, input, meta, link and the rest. They are written self-closing and never given a closing tag, which would be markup no browser expects.
Elements with optional closing tags.<li>a<li>b is two list items, not a nested one. The same applies to p, tr, td, th, option, dt and dd. The parser implements the specification’s implicit-closing rules rather than assuming everything is closed explicitly.
Forms.input, select, textarea, button and label are inline, so a label and its field stay on one line — separating them would insert a rendered space between them.
Tables. The deepest routine nesting in HTML. caption, colgroup, thead, tbody and tfoot are all placed correctly, and a cell outside a row is reported as invalid nesting.
Media.picture, source, video, audio and track, including the parent constraints — a source outside a media element is flagged.
Custom elements. Accepted without complaint, provided the name contains a hyphen — which is how the standard keeps custom names from colliding with future built-in ones.
Common HTML formatting best practices
Consistent indentation
Pick one width and never think about it again. Two spaces is the most common choice for HTML precisely because markup nests deeply and four runs out of line quickly.
Format before committing, not after. A reformat mixed into a change makes the diff unreadable and the review worthless.
Semantic markup
Use the element that means the thing.<nav> rather than <div class="nav">. Assistive technology navigates by landmark, and a div is not one.
One <h1>, then headings in order. Skipping from h2 to h4 breaks the outline screen-reader users navigate by.
Accessible HTML
Every image needs alt. Empty for decoration, descriptive for content. Without it a screen reader announces the filename.
Set lang on <html>. It chooses the pronunciation. One attribute, large effect.
Bind labels to controls. A for pointing at a duplicate id points at the wrong field — which is why duplicate ids are an error here and not a warning.
Proper nesting and clean structure
Close in the order you opened. Browsers recover from overlapping tags, but not the way you intended.
Never put a block element inside <p>. The paragraph closes implicitly at the block, leaving markup that does not match what you wrote.
Keep ids unique and use classes for styling. Ids are addresses; duplicating one breaks anything that looks a thing up by it.
HTML formatter vs HTML minifier
Exact inverses, aimed at different readers. A formatter adds whitespace so a person can follow the structure; a minifier removes it so the file transfers faster.
1Formatted readable, larger, diffs cleanly → for working and committing2Minified unreadable, smaller, one line → for shipping
Format while you work. During development, in your editor, and before every commit.
Minify at build time. As a deployment step, never as a thing you commit — minified markup destroys code review along with the bytes.
Neither is lossy. Both preserve the document; they disagree only about who is reading it.
Both face the same hazard from opposite directions. The formatter must not add whitespace that renders; the minifier must not remove it. Collapsing the space in <span>a</span> <span>b</span> renders “ab”, so this tool only removes whitespace between block elements and at the edges of a block box, where the browser was going to discard it anyway.
On a typical page minifying saves 15–25%. Worth having in a build, and worth far less than gzip, which is doing most of the work already.
Common use cases
Anywhere markup has to be read by a person rather than only by a browser.
Web development
Making sense of markup that arrived from a build step, a colleague or a decade ago. Consistent indentation turns a wall of tags into a structure you can read at a glance.
Email templates
Email HTML is nested tables and inline styles, generated by tools that care nothing for readability. Formatting is often the only way to find the cell that broke the layout.
CMS content
What a rich-text editor stores is rarely what anyone would write by hand — stray spans, empty paragraphs, duplicated ids from copy-and-paste. The validator finds those quickly.
Landing pages
Checking a hand-built page renders at every width before it ships, with the preview switching between mobile, tablet and desktop without leaving the tool.
Static websites
Keeping hand-written HTML consistent across a site, so that diffs show what actually changed rather than a reflow caused by someone's editor.
Debugging
When a page renders wrongly and the markup looks fine, the cause is usually a tag closed in the wrong order. Formatting makes the nesting visible and validation names it outright.
Learning HTML
Seeing a document laid out by its structure teaches the structure. The validator explains why something is wrong rather than only that it is, which is the part tutorials tend to skip.
Code review
Formatting before committing keeps diffs meaningful. One-attribute-per-line makes a single changed attribute a single changed line, which is far easier to review.
Frequently asked questions
Is this HTML Formatter free?
Yes. Formatting, minifying, validation, the live preview, the sample library, search, copy and download are all free, with no account and no limit on document size.
Is my HTML uploaded?
No. The document is parsed and formatted by JavaScript running on your own machine — nothing is sent over the network, stored or logged. You can disconnect after the page loads and it keeps working, which matters because people paste production markup, API keys in script tags and unreleased pages into tools like this one.
Will formatting change how my page works?
No, and the tool is built specifically around that guarantee. HTML renders the whitespace between inline elements, so a formatter that puts every tag on its own line inserts spaces that were never there — turning <span>a</span><span>b</span> into something that renders with a gap. This formatter only ever breaks a line where the source already had whitespace, because a newline collapses to the same single space. The test suite asserts it directly: minifying the original and minifying the formatted output must produce byte-identical results.
Can I format complete HTML documents?
Yes. A doctype, head, body, scripts, styles and comments are all handled, and so are fragments — a single div pasted out of a template works exactly as well as a whole page.
What happens to my script and style tags?
Their contents are left exactly as written. Re-indenting them would look tidier and is not safe: a JavaScript template literal carries its own leading whitespace as part of the string, so shifting those lines changes what the program produces. This tool formats HTML and does not pretend to speak the languages embedded in it.
Does it preserve <pre> and <textarea>?
Yes, exactly. Whitespace inside them is content rather than formatting, so re-indenting would visibly change the rendered page. They are written back byte for byte.
Can I validate HTML5?
Yes. The validator reports missing closing tags, tags closed in the wrong order, duplicate ids, duplicate attributes, invalid nesting such as a list item outside a list, unclosed quotes, obsolete elements and unknown element names. Every finding carries a line, a column and a suggested fix, and clicking one moves the cursor to it.
Why are some findings errors and others warnings?
An error means the browser will build a different document from the one you intended — a missing closing tag, a duplicate id, illegal nesting. A warning means the markup works but could be better: an unknown element, a missing alt attribute, an obsolete tag. Nothing is called an error unless being wrong about it would cost you something.
Can I preview my HTML?
Yes, at mobile, tablet and desktop widths. The preview renders inside a sandboxed frame with scripts disabled and no access to this page, because the markup you paste is untrusted input. That means a script-driven page shows its structure rather than its behaviour — the right trade for a formatter, where you are checking layout rather than running an application.
Can I upload HTML files?
Yes, up to 10 MB, by the upload button or by dropping a file anywhere on the tool. The file is read locally and never leaves your machine.
Can I minify HTML afterwards?
Yes, the same tool does both — press Minify or Ctrl+Shift+M. Minifying faces the mirror of the formatting hazard: collapsing whitespace between two inline elements joins words that were separate. Space is only removed where it cannot change rendering, which is between block elements and at the edges of a block box.
What does the attribute wrapping option do?
Auto keeps attributes on one line until the tag would pass the wrap width, then puts them one per line. Same line never wraps, however long the tag becomes. One per line always wraps, however few there are — useful for diff-friendly templates, where a one-attribute change should be a one-line change.
Does it handle self-closing and void elements?
Yes, and it never invents a closing tag for them. img, br, hr, input, meta, link and the rest of the fourteen void elements are written in the self-closing form and never given a </img>, which is markup no browser expects.
What about tags whose closing tag is optional?
They are closed correctly. <li>a<li>b is two list items rather than a nested one, and the same applies to p, td, th, tr, option, dt and dd. A formatter that nested them would change the document, which is why the parser implements the specification's implicit-closing rules rather than assuming every tag is closed explicitly.
Can it handle very large files?
Yes. A megabyte formats in well under a second, and anything above about 80 KB is processed in a Web Worker so the editor never stutters while you type. Deeply nested documents are handled too — parsing, formatting and minifying are all written as explicit loops rather than recursion, so a few thousand levels of nesting will not overflow the stack.
Does it support XHTML?
It reads it. XHTML's self-closing syntax, explicit closing tags and CDATA sections all parse correctly, and the output uses self-closing void elements, which is valid in both. It does not enforce XHTML's stricter rules — lowercase tags, quoted attributes everywhere — beyond normalising what it writes.
What is the difference between a formatter and a minifier?
They are inverses. A formatter adds whitespace so a human can read the structure; a minifier removes it so the file transfers faster. Format while you work and minify when you deploy — and never commit minified output, since it destroys diffs and code review along with the bytes.
Does this tool work offline?
Once the page has loaded, yes. Parsing, formatting, validation and the preview are all local, so it keeps working with the network disconnected.
Keep going
Tools that pair with this one
Same privacy model — everything below runs in your browser too.
