HTML Formatter Online — Free HTML Beautifier

Indent tags, normalize whitespace, and clean attribute spacing in any HTML document or fragment. Handles void elements, comments, and DOCTYPE — entirely in your browser.

Indent:

Input HTML

Formatted HTML

What is an HTML Formatter?

An HTML formatter (sometimes called a beautifier or pretty printer) re-indents HTML markup so each tag sits on its own line at a depth that reflects its position in the DOM tree. It collapses noisy inter-tag whitespace, preserves attribute strings exactly, recognizes void elements, and produces output ready for code review, version control, or human reading.

Auto-generated HTML — from CMS exports, email builders, server templates, or minified bundles — frequently arrives as a single line or with inconsistent indent. The OpenFormatter HTML formatter runs entirely client-side, so even page source containing internal layouts, hidden form fields, or proprietary markup never touches a server.

How to format HTML — 4 steps

Paste your HTML. Use the Input panel above. Load Sample drops in a minified document if you just want to try the tool.
Pick an indent. 2 spaces is the most common modern style; 4 spaces is traditional; tabs work for editors configured to render them.
Click Format. The formatter tokenizes the markup, tracks open/close depth, and emits each tag on its own line at the correct indent level.
Copy the output. Paste into your editor, send through code review, or commit to source control with a clean diff.

Sample input and output

Before — minified

<div class="card"><h2>Title</h2><img src="x.png" alt=""/><p>Body</p></div>

After — formatted

<div class="card">
  <h2>Title</h2>
  <img src="x.png" alt=""/>
  <p>Body</p>
</div>

Depth-aware indent

Each tag is emitted at an indent matching its open/close nesting depth. Void elements never increase the level — no spurious indent after <br>, <img>, or <hr>.

Whitespace normalize

Collapses runs of whitespace between tags into a single newline. Inline text content is preserved verbatim — only inter-tag whitespace is touched.

Client-side only

Tokenization and re-emission run in JavaScript inside your browser. No upload, no analytics on your input, no rate limits.

Common use cases

check_circleReformatting HTML exported from WordPress, Contentful, Sanity, or other headless CMS platforms
check_circleCleaning up auto-generated email-builder HTML before reviewing it in source
check_circleBeautifying minified HTML from production builds for debugging layout issues
check_circleProducing clean diffs in pull requests by formatting before commit
check_circleMaking server-rendered HTML readable when inspecting page source from view-source:
check_circleTidying handwritten HTML before pasting into documentation, blog posts, or technical articles
check_circleIndenting deeply nested HTML email tables (still the standard for transactional email)
check_circleStandardizing indent across team members with different editor defaults

Formatter vs. validator vs. minifier

A formatter changes whitespace only — same DOM, different presentation. A validator checks structural correctness (unclosed tags, deprecated elements, bad nesting) and reports errors without rewriting your source. A minifier does the opposite of formatting: it strips whitespace and comments to reduce file size for production. The three tools are complementary — format while writing, validate before committing, minify before deploying.

Need to do more than format?

Validate, view, or minify HTML with the rest of OpenFormatter's HTML toolkit — all browser-side.

HTML Validator HTML Viewer HTML Minifier

Frequently Asked Questions

What does an HTML formatter actually do?

It tokenizes the markup, tracks open/close tag depth, and re-emits each tag on its own line indented by its nesting level. Void elements (br, img, hr, input, meta, link, source, track, wbr) and self-closing tags do not increase indent depth. Whitespace inside <pre> blocks should be preserved by quality formatters; this one collapses surrounding whitespace but does not re-wrap text content.

How is it different from html-pretty-print?

There is no functional difference. "Format", "beautify", and "pretty print" all describe the same operation. We expose both URLs because both terms have search demand, but the algorithm is identical. If you arrived from a pretty-print bookmark, this is the canonical tool.

Will it fix my unclosed tags?

No. The formatter assumes well-formed input — it indents what it sees but does not invent missing close tags. For structural fixes, run the HTML Validator first to identify unclosed elements, fix them in source, then format. This separation keeps formatter behavior predictable.

How does it handle self-closing void elements?

Both <br> and <br/> are recognized as void. The formatter does not increase indent depth after a void tag and does not look for a matching close tag. Existing self-closing slashes are preserved as written — the formatter does not impose XHTML or HTML5 style on void elements.

Does it touch attribute order or values?

No. Attribute order is preserved exactly. Quote characters and values are passed through unchanged. The formatter only adjusts whitespace between tags — the attribute string between the tag name and the closing > is treated as opaque.

Will it format embedded CSS and JavaScript?

No. Content inside <style> and <script> is preserved verbatim. To format embedded JavaScript use the JS Beautifier; for embedded CSS extract the contents and run them through a CSS formatter, then re-embed.

Can I choose 4-space indent or tabs?

Yes. The Indent dropdown supports 2 spaces (default), 4 spaces, and tab. Selection takes effect on the next Format click — there is no need to clear and re-paste.

Is the HTML uploaded anywhere?

No. Formatting runs entirely in your browser. Pages containing CMS-generated content, internal layouts, or proprietary templates never leave your device. Open DevTools → Network and click Format to verify no request is made.