Skip to main content
toolk.site

HTML Formatter Online — Free HTML Beautifier

Paste messy or minified HTML and get clean, indented markup instantly. Beautify with 2-space indent or minify for production. Free, no sign-up, runs in your browser.

HTML Input
0 chars
Formatted HTML
0 chars

Instant Beautify

Re-indents with 2 spaces and keeps inline tags like span and a on one line as you type.

Beautify or Minify

One toggle. Minify strips whitespace and comments while keeping conditional comments intact.

100% Private

All processing runs locally in your browser. Your markup is never uploaded or logged.

Security: Secured Client-Side Markup Engine
Privacy: 100% Zero-Knowledge Data Handling

Format HTML Online: Free HTML Beautifier & Minifier

This HTML formatter takes messy, minified, or single-line markup and re-indents it with 2 spaces per nesting level so the tag hierarchy is readable. Paste your code, pick Beautify or Minify, and the cleaned output appears instantly with its byte size. Everything runs in your browser, it is free, and there is no sign-up. Minify reverses the process to shrink production payloads.

How to format HTML

  1. Paste your HTML into the HTML Input panel, or click Example to load a sample document.
  2. Leave the toggle on Beautify to indent the markup, or switch to Minify to strip whitespace and comments.
  3. Read the formatted result in the right panel. The output updates as you type, with no button press needed.
  4. Check the stats bar for the original size, the new size, and the savings or increase percentage.
  5. Click Copy to grab the output, or the download icon to save it as .html.

What an HTML formatter does and how it works

An HTML formatter rewrites the spacing of your markup without changing the tags themselves. Beautify walks the document tag by tag, increases indentation when it opens a normal element, and decreases it when it hits a closing tag. Void elements never change the depth because they have no closing tag. The current WHATWG HTML Standard (§13.1.2) defines exactly 13 void elements and states plainly:

"Void elements only have a start tag; end tags must not be specified for void elements."

The same spec note adds that a trailing slash on a void element "does not mark the start tag as self-closing but instead is unnecessary and has no effect of any kind." So <br> and <br /> are identical to a browser. This formatter follows that rule: it keeps void tags on their own line and never indents content under them. Inline elements such as a, span, strong, and code stay on the same line as their text so words are not torn apart.

The 13 HTML void elements (no closing tag)

These tags take no closing tag and no children. The beautifier treats every one of them as a leaf, so they never add an indentation level.

TagPurpose
<br>, <wbr>, <hr>Line break, word-break opportunity, thematic rule
<img>, <source>, <track>, <embed>Images, media sources, text tracks, embedded content
<input>, <col>, <area>Form control, table column, image-map region
<meta>, <link>, <base>Document head metadata, external resources, base URL

Note: <param> and <keygen> were once void but are now obsolete. The modern list has exactly 13 tags.

Worked examples

1. A single-line nav, beautified

Input

<ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul>

Output (2-space indent, inline anchors kept inline)

<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
</ul>

2. The same markup, minified

Output

<ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul>

Minify removes the spaces around = and the gaps between tags, and deletes regular comments while keeping <!--[if mso]> conditional comments intact for Outlook email.

3. Edge case — whitespace inside <pre> is NOT preserved

Input

<pre>line one
    indented line two</pre>

Output (line break and indentation collapsed to a single space)

<pre>line one indented line two</pre>

Because <pre> renders whitespace verbatim, this changes the visible output. The same caution applies to <textarea> and <script> bodies.

The whitespace trap most formatters hide

Every fast, regex-based HTML beautifier (this one included) collapses runs of whitespace to normalize indentation. That is safe for almost all markup but silently corrupts whitespace-significant elements: <pre>, <textarea>, and any element styled white-space: pre, plus the contents of <script> and inline JSON. The WHATWG spec is explicit that <pre> content is rendered as-is, so reformatting it changes what users see. Most competing tools never warn about this. Our rule: never run a whole document containing live <pre> or template literals through beautify. Format the surrounding markup and leave those blocks alone. For data payloads, format them with the right tool instead — the JSON Formatter for JSON or the XML Formatter for XML.

Beautify vs. minify: what each mode changes

OperationBeautifyMinify
IndentationAdds 2 spaces per depth levelRemoves all indentation
Whitespace between tagsNormalized to line breaksStripped (>< touching)
HTML commentsKeptRemoved (except conditional)
Spaces around attribute =KeptRemoved
Best forReading, debugging, code reviewProduction payloads, faster LCP

Privacy: everything runs in your browser

Runs 100% in your browser — your data never leaves your device. No uploads. We tested this formatter on single-line minified pages, deeply nested Outlook email tables, and full HTML5 documents with the example loader. Because the work happens locally in JavaScript, the only practical size limit is your device memory, and proprietary or unreleased markup stays on your machine.

Related frontend & formatting tools

CSS Beautifier

Indent and clean your stylesheets

CSS Minifier

Shrink CSS for production

JavaScript Minifier

Compress JS bundles

XML Formatter

Indent XML and sitemaps

JSON Formatter

Validate template data

HTML to JSX

Port markup into React

HTML Entity Converter

Encode and decode entities

Markdown to HTML

Convert Markdown to markup

Meta Tag Previewer

Check head metadata

Color Contrast Checker

Audit WCAG accessibility

Diff Checker

Compare two HTML versions

UUID Generator

Generate unique element IDs

New to markup hygiene? Read our developer tools guides on clean code and frontend formatting.

Last updated: June 2, 2026 · Runs 100% in your browser. No uploads, nothing leaves your device.

Need a different tool?

Browse all 89 free, in-browser tools — or tell us what we should build next.

Browse all tools