HTML Formatter - Beautify & Indent

Overview

Beautify your HTML — cleanly and privately

An HTML Formatter re-indents messy or minified HTML according to its nesting depth, adding consistent line breaks and spacing so the structure is readable. This one runs entirely in your browser — your HTML is never uploaded — and it preserves whitespace-sensitive tags like <pre> and <script>.

Whether you've copied markup from "View Source", exported a minified template, or hand-edited a messy file, an HTML formatter makes it readable again. It re-indents your HTML so each element sits at the right depth for its nesting, adds sensible line breaks, and highlights the syntax — turning a wall of tags into a clear, browsable structure.

Paste your HTML or load a local file, pick your indentation (2 spaces, 4 spaces or a tab), and it is re-laid-out as you type — there is no Format button. Minify collapses it again for a quick size check, Outline lists the document as a tree of elements with a child, attribute and text count against each, and a problem list under the panes names any unclosed element, stray end tag or unclosed comment with the line it is on. It handles void elements correctly (<img>, <br>, <input>, <meta>, <link> don't get a spurious closing indent), and it preserves the contents of whitespace-sensitive tags — <pre>, <textarea>, and the code inside <script> and <style> — so beautifying never changes how your page actually renders. When you're done, copy or download the result, or flip to minify.

The HTML formatter in dark mode: minified markup in the cyan editor pane on the left with a line-number gutter, and the magenta pane on the right showing it re-indented by nesting depth, with the pre block keeping its own spacing and the sentence "Read the docs first." still on one line — One stage, two panes. The pre block keeps its spacing and the run of inline tags stays on one line, because a line break between them would be a space the reader never typed

A space beside an inline tag is a word space. That is the rule most formatters get wrong, and breaking it is how <b>docs</b> <i>first</i> comes back rendering as one word. This one reads the document with a real tokenizer, so a > inside an attribute value does not end a tag, a < b inside a script is not markup, and a run of inline content stays on the line it was written on. <pre> and <textarea> come back byte for byte.

As with every tool here, privacy is the point. All formatting happens in your browser — there's no server, no upload, no logging, and no tracking of your markup. Developers paste proprietary page source, internal templates, and email HTML; here that content never leaves your device, and the tool keeps working offline once loaded.

Two honest notes. First, formatting is purely cosmetic: it changes whitespace and indentation, not what the browser renders. Second, this is a beautifier, not a validator or linter — it won't check accessibility, flag standards violations, or "repair" fundamentally broken markup; it lays out whatever you give it as cleanly as it can.

For the reverse, see the HTML Minifier; to convert markup to Markdown, HTML to Markdown; and for stylesheets and scripts, the CSS Formatter and JavaScript Formatter.

Use cases

When an HTML formatter helps

Reading source. Turn minified or "View Source" HTML into readable markup.
Cleaning templates. Re-indent a messy or exported template.
Email HTML. Make table-heavy email markup navigable.
Learning. See a page's structure clearly by nesting.
Sensitive markup. Format internal templates without uploading them.

Guide

How to format HTML

Paste or load your HTML

Type it, paste it, or open a local file (read in-browser, not uploaded).

Choose your indentation

2 spaces, 4 spaces or a tab. It shapes the formatted output and nothing else, so pick what your project uses. The Tab key inserts the same indent inside the editor, and Esc then Tab moves focus out to the next control.

Format, minify or outline

Format re-indents by nesting depth and highlights the syntax. Minify strips the whitespace that does not render, keeping conditional comments and every word space. Outline drops the markup entirely and shows the element tree, which is the quickest way to see the shape of a page you did not write.

Check preserved tags

<pre> and <textarea> come back byte for byte — their whitespace is what they are for. A <script> or <style> body keeps its own line breaks and its own relative indentation, moved as one block to sit under its tag, so the code reads correctly at its new depth without a character of it changing.

Copy or download

Copy and Download both hand over the pane you are looking at — index.html from Format, index.min.html from Minify, outline.txt from Outline. Nothing is sent anywhere; the file is built in the page.

Read the problem list

Four things are reported under the panes, each with the line it is on: an element that is never closed, an end tag with nothing open to close, a < inside a tag where a > is missing, and a comment that never ends. Optional end tags are not errors — <li>, <td>, <p> and their family may be left out, and the formatter closes them where the next tag implies it. Output is produced either way; a problem is a note, never a refusal.

The HTML formatter showing a document with two problems: both panes are still working, the status pill reads "Formatted, with warnings", and a red-tinted panel below is headed "2 problems" with its first entry labelled line 8 — a stray closing section tag with nothing open to close — A problem is a note, not a refusal: the output is still there, and each problem names the line it is on

Realistic example

Paste a one-line <ul><li>One</li><li>Two</li></ul> and it becomes a tidy, indented list with each <li> on its own line, nested under the <ul> — much easier to scan and edit.

Advanced tip

If a chunk of your HTML "shouldn't" be reflowed — like preformatted text or an inline code sample — keep it in <pre> and the formatter will leave its whitespace alone.

Common mistake to avoid

Do not expect it to repair broken markup — it lays out what you give it, and an unclosed element is reported rather than closed for you. It is also not a spec validator: it says nothing about accessibility, attribute values, or whether an element is allowed where you put it. Use the W3C checker for that.

Minify here is the whitespace pass alone. The dedicated HTML Minifier adds a comment policy, optional-end-tag removal and real JavaScript and CSS minification of inline blocks, and shows the size saved. To turn markup into prose, use HTML to Markdown; for the code inside the tags, the CSS Formatter and JavaScript Formatter.

The HTML formatter with Minify selected: the magenta pane holds the whole document on a few lines, the pre block still carrying its two leading spaces and the sentence "Read the docs first." still carrying the space between the bold and italic words — Minified, with the two things that must survive it: the pre block, and the space between two inline tags

Good to know

What to keep in mind

Zero-knowledge and private. Formatting runs in your browser — nothing is uploaded, logged, or tracked, and it works offline.
Cosmetic only. It changes indentation and whitespace, not how your page renders.
Whitespace-sensitive tags preserved. <pre> and <textarea> byte for byte; a <script> or <style> body keeps its own layout and moves as one block.
A beautifier that reports four problems. Unclosed elements, stray end tags, a missing > and unclosed comments, each with its line. It does not check accessibility or standards, and it repairs nothing.
Large files run locally. Very big HTML is limited by your device, since there's no server.

Support

Frequently Asked Questions

The HTML formatter with Outline selected: the magenta pane lists the document as indented cards — html with 2 children and 1 attribute, head with 3 children, and meta, title and style indented beneath it, each card noting its own child, attribute and text counts — Outline reads the same tokens the formatter does, so a > inside an attribute value cannot invent a node

The HTML formatter on a 390-pixel phone: the Format, Minify and Outline buttons across the top, a two-button tab strip reading Your HTML and Result, and the re-indented markup filling the width with syntax colouring — On a phone the two panes become a tab strip and the three mode buttons take the full width

How do I beautify or format HTML?

Paste your HTML (or load a local file), choose an indentation of 2 spaces, 4 spaces, or a tab, and the tool re-indents the markup according to its nesting depth, adding line breaks and highlighting the syntax. A cramped or minified block becomes a clean, readable structure you can scan and edit. Then copy or download the result — nothing leaves your browser.

Does this upload my HTML, and does it work offline?

No upload, and yes it works offline. All formatting happens in your browser using JavaScript — there's no server receiving your markup, no logging, and no tracking of your content. That makes it safe for proprietary page source, internal templates, and email HTML. Once the page has loaded it keeps working with no internet connection, which you can confirm in your browser's network tab.

Does formatting change how my page renders?

No. Formatting only adjusts whitespace and indentation, which browsers ignore between block-level elements, so the rendered page is unchanged. The tool is careful to preserve content where whitespace does matter — inside <pre>, <textarea>, <script>, and <style> — so beautifying is safe. Your markup means exactly the same thing before and after; it's just laid out more clearly.

What indentation should I use?

It's a style choice. 2 spaces keeps files compact and is a common front-end default; 4 spaces is more spread out and can be easier to read for deeply nested markup; a tab lets each editor set its own width. Indentation is purely cosmetic and doesn't affect rendering, so pick whatever matches your project's or team's conventions.

Does it preserve <pre>, <script>, and <style>?

Yes, and the two cases are not quite the same. <pre> and <textarea> render their own whitespace, so they come back byte for byte and nothing inside them is re-indented. <script> and <style> are raw text: the tokenizer does not look inside them for markup at all, which is why a < b in a script is not a tag. Their contents keep every line break and every relative indent, and the block as a whole is moved to sit under its own tag. If you want the CSS or JavaScript itself beautified, use the dedicated CSS Formatter or JavaScript Formatter.

What's the difference between formatting and minifying HTML?

Formatting (beautifying) adds indentation and line breaks to make HTML readable; minifying removes them, plus comments and redundant spaces, to make the file as small as possible for faster loading. You beautify while developing and minify for production. This tool beautifies, and can minify too — or use the dedicated HTML Minifier for the reverse.

Can it fix or validate broken HTML?

It flags, it does not fix. Four structural problems are reported with the line each is on: an element that is never closed, an end tag with nothing open to close, a < inside a tag where a > is missing, and a comment that never ends. Optional end tags are not among them, because leaving out </li> or </p> is legal HTML. Beyond that it is not a validator: it says nothing about accessibility, attribute values or whether an element belongs where you put it, and it repairs nothing — broken markup is laid out as found, with the problems listed under it. For a full check use the W3C markup checker.

Can I format HTML from "View Source" or an email?

Yes — those are ideal cases. "View Source" and exported email HTML are often minified or awkwardly wrapped, and this formatter re-indents them into a clear, navigable structure. Email HTML in particular is table-heavy and hard to read; beautifying it makes the nesting obvious. Just paste it in and format — and because it's private, you can do this with internal or client markup safely.

Can I load an HTML file instead of pasting?

Yes. You can open a local .html file and the tool reads it directly in your browser with the FileReader API — the contents load into the editor without being uploaded anywhere. This is convenient for larger files or ones you'd rather not copy and paste, and it's exactly as private as pasting the markup by hand.

Does it handle void elements like <img> and <br>?

Yes. Void (self-closing) elements — <img>, <br>, <hr>, <input>, <meta>, <link> — have no closing tag and no children, so the formatter indents them correctly without adding a spurious nested level. This keeps the output accurate to how HTML actually nests, rather than mis-indenting everything after an image or line break.

Can it format very large HTML?

Usually yes. Because it runs locally, the limit is your device's memory and CPU rather than a server cap, and modern browsers handle large documents well. Very large files (many megabytes, or with huge inline scripts) can get slow, but there's no upload size limit from us and nothing is sent anywhere — it's purely a matter of local performance.

Is it free, and are there limits?

Yes, completely free — no payment, no signup, no account, and no usage caps or watermarks. Since everything runs in your browser, there's nothing for us to meter; the only practical limit is your device's performance on very large documents. Use it as much as you like, including offline once the page has loaded.

What does the Outline view show?

The element tree of whatever is in the editor, read off the same tokens the formatter uses — so a > inside an attribute value cannot invent a node, and nothing inside a <script> is mistaken for one. Each node carries its tag name, how many children it has, how many attributes, and how many characters of text sit directly inside it. Void elements such as <img> and <br> appear as leaves, because they cannot contain anything. It is the fastest way to answer "what is this page made of" for markup you did not write, and Copy hands you the same tree as indented text.

Still have questions?

If you can't find the answer you're looking for, feel free to contact our support team.

HTML Formatter & Validator

Privacy Focused

Instant Results

No Signup

Browser Based