HTML Formatter Online Free

💻 Developer Tools ✔ Free Forever

HTML Formatter Online Free

Paste messy HTML and get it back clean, indented, and readable in seconds. Beautify or minify, control indent size, and strip comments. Runs entirely in your browser.

✔ Beautify HTML ✔ Minify HTML ✔ Indent control ✔ Strip comments ✔ Syntax highlight ✔ 100% browser based
Indent
Input HTML
Warning
Output HTML
Choose a sample
About This Tool

A character-walking HTML beautifier and minifier, not a regex hack

Most quick HTML formatters run a handful of find and replace patterns over your markup and hope for the best. This one walks the string one character at a time, tracks a nesting depth counter, and classifies every tag it meets before deciding how to indent it. That distinction matters the moment your markup has a script block full of braces, a self closing image tag, or an inline span sitting next to plain text.

Everything happens in your browser. The tool never sends your markup to a server, there is no fetch call anywhere in the source, and nothing you paste is stored once you close or clear the tab.

How the beautifier reads your markup

The formatter keeps three lookup tables in memory: void tags that never close (img, br, input, hr and friends), inline tags that should not force a new indent level (span, a, strong, code, label), and raw tags whose contents are copied through untouched rather than reparsed (script, style, pre). Every tag it finds gets checked against these tables before a decision is made.

Step 1 Find the next tag The scanner searches for the next < character. Anything before it is loose text, trimmed and pushed out at the current depth.
Step 2 Classify it Closing tag, comment, self-closing tag, void element, inline element, raw element, or a normal opening tag. Each branch has its own indent rule.
Step 3 Adjust depth A normal opening tag increases the depth counter by one for everything that follows. A closing tag decreases it first, then prints itself at the new, shallower depth. Inline tags never touch the counter.
Step 4 Handle raw content specially Inside script, style, or pre, the tool locates the matching closing tag directly and copies each internal line at one extra indent level, without trying to interpret the content as HTML.
// simplified from the actual beautifier if (tagContent.charAt(0) === ‘/’) { closeName = tagContent.slice(1).split(/\s/)[0].toLowerCase(); if (!inlineTags[closeName]) depth = Math.max(0, depth – 1); addLine(getIndent(depth) + tag); } else if (!voidTags[openName]) { addLine(getIndent(depth) + tag); depth++; }

The Math.max(0, depth - 1) guard exists because malformed HTML with an extra closing tag would otherwise push the depth counter negative and throw off every line after it. Clamping at zero keeps the output readable even when the source markup is not perfectly balanced.

Indent width and attribute wrapping

You can pick two spaces, four spaces, or a real tab character for indentation, each applied by repeating the chosen indent string once per depth level. Turning on one attribute per-line rewrites any tag with more than one attribute so each attribute sits on its own line inside the opening bracket, which is the format most diff tools and code reviewers prefer for tags with many attributes.

OptionWhat it does
Strip commentsRemoves everything matching <!--...--> with a single non-greedy regex before formatting begins
One attribute per lineSplits a tag’s attribute list and re-indents each attribute one level deeper than the tag itself
Collapse blank linesDrops any output line that trims down to an empty string
Indent widthTwo spaces, four spaces, or a tab character, applied uniformly at every depth
Minify mode is a different code path entirely. Switching to minify does not reuse the beautifier’s tag walker. It runs three plain regex passes instead: collapse all whitespace runs to a single space, remove whitespace sitting directly between two tags, and tighten spacing around equals signs in attributes. That is intentionally simple. It will not strip unnecessary quotes or merge attribute values the way a dedicated tool such as html-minifier does, so treat it as a size reducer for shipping markup, not a full compressor.

What gets counted in the stats bar

Tag count

Counted with a single regex match against every substring starting with a letter after an opening angle bracket, so closing tags and comments are excluded from the total.

Byte size

Computed with new Blob([text]).size, which reflects the actual UTF-8 byte count rather than the JavaScript string length, so multi-byte characters are represented accurately.

One quirk worth knowing: the tool treats code as both an inline tag and a raw tag depending on context. Standalone inline code like <code>x++</code> is left on its line without adding depth, while a <pre><code> block is treated as raw content and its interior lines are preserved exactly, including existing whitespace, which is the correct behavior for a code sample.

Void element table Inline element table Raw content passthrough Blob-based byte counting

Related specifications and tools

  • WHATWG HTML Living Standard, void elements defines the exact list of tags that never take a closing tag.
  • MDN, inline elements covers the layout distinction this tool mirrors in its formatting rules.
  • js-beautify is the long-standing reference implementation for configurable HTML, CSS, and JS beautification if you need more format knobs than this tool exposes.
  • html-minifier is the tool to reach for when you need aggressive, production-grade minification beyond whitespace collapsing.
  • MDN, Blob.size explains why byte size and character length are not the same number.

When you reach for a formatter

Cleaning up markup copied out of a CMS export or an email builder, reformatting minified vendor HTML before you debug it, checking how many tags a component actually renders, standardizing indentation before a pull request, and shrinking a static HTML page a few kilobytes before deployment when a full build pipeline is not worth setting up.

Common Questions

FAQ: HTML Formatter Online Free

Yes. No account, no subscription, and no usage limits. The HTML formatter is free permanently for anyone.

No. All formatting runs inside your browser using JavaScript. Your HTML never leaves your device, making it safe for proprietary or sensitive code.

Beautify adds indentation and line breaks so humans can read the code easily. Minify removes all whitespace and comments to make the file as small as possible for fast page loads in production.

Yes. Paste any amount of HTML, from a single tag to a complete page with DOCTYPE, head, and body. The formatter handles the full document structure.

When enabled, each HTML attribute is placed on its own line with extra indentation. This is useful for reviewing complex elements with many attributes, such as forms, images, or custom data attributes.

The tool formats whatever you provide without enforcing strict validation. It handles malformed markup gracefully and will still produce readable output even for imperfect HTML.

Enable the Strip comments checkbox in the options bar before clicking Beautify or Minify. All HTML comments will be removed from the output.

Privacy Overview

Cookies let this site remember your preferences and show us which tools people actually use. Full detail sits in our Privacy Policy.