HTML Formatter
Prettify HTML · Format inline CSS & JS · Minify HTML
1L0ch

Related Tools

See all ->
JavaScript MinifierConcatenate, uglify & compressHTML → JSX ConverterConvert HTML to ReactCSS Minifier / BeautifierMinify & format CSSTailwind FormatterSort & group classesCSS → TailwindConvert CSS to utilitiesDiff CheckerCompare text & codeJSON FormatterFormat & validateCode ScreenshotBeautiful code images

HTML Formatter Online Free — Beautify & Indent HTML, Inline CSS, and JS

Updated May 14, 2026
Share & Support

What's included

Features

Formats HTML with consistent 2-space indentation and correct tag nesting depth
Automatically prettifies inline <style> CSS blocks — rule blocks, properties, and selectors; then minify or convert those styles with our CSS Minifier & Beautifier
Automatically prettifies inline <script> JavaScript blocks — brace-indented, readable JS
Live line-number gutter synced to editor scroll — updates instantly as you type or format
History bar — up to 15 timestamped snapshots, click any chip to restore that version
File upload and drag-and-drop — load .html or .htm files without copy-pasting
Download button — save the formatted result as an .html file to your computer
Handles void elements (br, img, input, meta, link, hr, etc.) with no extra indent step
Handles self-closing tags (/>), DOCTYPE declarations, and HTML comment blocks; convert formatted HTML to JSX with our HTML to JSX Converter
Works on partial HTML fragments — no complete document required, any snippet works
One-click Copy button copies the full formatted output to clipboard
100% client-side — no data sent to any server, no sign-up, no watermark, no limit; compare two versions of a template with our Diff Checker

About this tool

Format HTML Online Instantly — Beautify Minified HTML with Proper Indentation

Runs in your browser
No install or signup
Free forever

You got a wall of minified HTML from a build tool, a CMS export, or a web scraper and you can't read it. Or you copied a template from documentation and the indentation is all over the place. Paste it here and click Format — it comes back with clean 2-space indentation in under a second.

This formatter handles the full range of real-world HTML: nested block and inline elements, void elements (br, img, input, meta, link, hr) that don't add indentation depth, self-closing tags with />, DOCTYPE declarations, HTML comment blocks, and deeply nested component trees. Works on complete HTML documents, partial fragments, component templates, email HTML — whatever you have.

What makes this different from basic HTML indenters: it also formats inline CSS and JavaScript. Most HTML formatters only indent the tags — they leave the contents of style and script blocks as raw unformatted text. This formatter detects every style block and applies CSS-specific formatting (rule blocks, property lists, selector grouping), and every script block and applies JavaScript brace-based indentation. The result is a completely clean, readable document end-to-end — not just the tags.

The history bar saves up to 15 timestamped snapshots of your formatting sessions. Format, edit, format again, and every version is available to restore with one click. Live line numbers stay in sync with the editor so you can reference specific lines in code reviews or bug reports.

Everything runs in your browser. No code is sent to any server. Safe for internal templates, client work, and any HTML you wouldn't want shared.

Step by step

How to Use

  1. 1
    Paste or upload your HTMLPaste your raw, minified, or unformatted HTML directly into the editor. You can also click Upload to load an .html, .htm, .xml, or .svg file from your computer, or drag and drop a file directly onto the editor area. The editor accepts full HTML documents, partial fragments, component templates, email HTML, and any other valid or near-valid markup.
  2. 2
    Choose indent size (2 or 4 spaces)Use the 2 or 4 chip buttons in the toolbar to set your preferred indentation width before formatting. 2 spaces is the most common default. The setting also applies live to already-formatted output — switch between 2 and 4 and the result updates instantly without re-clicking Format.
  3. 3
    Click Format to beautifyClick the Format button. The output appears with clean indentation, properly nested tags, and formatted inline CSS and JavaScript blocks. Void elements — br, img, input, meta, link, hr, area, base, col, embed, param, source, track, wbr — are handled correctly with no extra indentation step.
  4. 4
    Use Minify to collapse the outputClick Minify to collapse the HTML to its smallest possible single-line form — all whitespace removed, inline CSS and JS compacted. Check Keep comments before minifying if you want HTML comment blocks preserved in the output. The minified result appears immediately and can be copied or downloaded.
  5. 5
    Use Find to search through the codeClick Find (or press Ctrl+F / Cmd+F) to open the search bar. Type a query to highlight all matches in the editor. Use the up/down arrows to jump between matches and toggle Aa for case-sensitive search. The search bar works in both input and formatted output modes.
  6. 6
    Copy, download, or restore from historyClick Copy to copy the full output to clipboard. Click Download to save it as formatted.html. Click History to see up to 15 timestamped snapshots of previous format operations — click any entry to restore that version instantly.
  7. 7
    Toggle line wrap for long linesClick Wrap in the toolbar to toggle word-wrap on long attribute lists or minified output. The live line-number gutter stays synced to the editor scroll position in both wrapped and unwrapped modes.

Real-world uses

Common Use Cases

</>
Expand minified HTML from a build tool or CDN into readable code
Paste one-line minified HTML from webpack, Vite, a CDN response, or a server-rendered page and expand it into a fully indented, navigable structure. Line numbers make it easy to find broken nesting or missing closing tags. Then use our JSON Formatter to format any embedded JSON payloads in script tags.
⇄
Review a PR with messy or auto-generated HTML templates
Paste the template HTML before reviewing a pull request. Clean 2-space indentation makes structural issues — extra nesting levels, misplaced divs, wrong tag order — immediately visible. Compare before and after with our Diff Checker to see only what changed.
◑
Read HTML returned by a web scraper or API
Format raw HTML from a headless browser, scraper output, or an HTML-returning API endpoint so you can navigate the structure and find the elements you need to parse or extract.
▦
Inspect the table nesting in an email template
Format HTML email templates from Mailchimp, Klaviyo, or custom builders to see the table-based nesting structure email clients require. Broken table nesting is invisible in minified HTML — it becomes obvious with indentation.
⚡
Clean up an HTML snippet pasted from Stack Overflow or AI
Code snippets from documentation, Stack Overflow answers, or AI tools often arrive with inconsistent or missing indentation. Format them here before adding to your codebase so the style matches your project. If you're converting to React, use our HTML to JSX Converter next.
◉
Format a code example before posting it in a blog or docs
Prettify HTML code examples before including them in blog posts, documentation, READMEs, or presentations. Properly indented examples are easier to read and copy for your audience.

Got questions?

Frequently Asked Questions

Paste the minified HTML into the editor and click Format. The entire document expands from a single line into properly indented, nested structure. Every opening tag increases indentation depth and every closing tag decreases it. Void elements (br, img, input, meta, link) are handled correctly without adding extra indentation depth. The result is ready to read, debug, or commit to version control.

Yes — this is what separates it from basic HTML indenters. Most online HTML formatters only indent the tags and leave style and script block contents as raw unformatted text. This tool detects every style block and applies CSS formatting (rule blocks, property indentation, selector spacing), and every script block and applies JavaScript brace-based indentation. The entire document is formatted end-to-end.

Yes. You don't need a complete HTML document with doctype, html, head, and body. Paste any fragment — a single div and its children, a navigation component, a form, a table, or a Vue/Angular/React template — and the formatter indents it correctly. It works on whatever structure is present, not on assumptions about a complete document.

Yes — this tool is completely free with no installation, no extension, no sign-up, and no file upload. Paste HTML, click Format, and copy the result. Works in Chrome, Firefox, Safari, and Edge on both desktop and mobile. Everything runs in your browser using JavaScript — no server involved.

Every time you click Format, the output is automatically saved as a timestamped chip in the history bar. Up to 15 entries are saved per session. Click any chip to restore that version — useful when you format, make edits, format again, and want to compare or go back to an earlier version. History is only kept in memory for the current session; closing the tab clears it.

No. All formatting runs in your browser using JavaScript. Your HTML is never transmitted over the network or stored anywhere. Safe for internal templates, proprietary component code, client work, and HTML you wouldn't want to share with a third-party service. Works fully offline once the page is loaded.

Yes, for most real-world imperfections. It handles missing closing tags, attributes without quotes, mixed case tag names, and other common issues. It applies best-effort indentation based on the tag structure it can detect. Severely mismatched tag hierarchies may produce unexpected indentation. For production code, validate with the W3C Markup Validator after formatting.

Yes. Click Upload to load an .html or .htm file from your computer, or drag and drop a file onto the editor. Click Download after formatting to save the result as a .html file. The filename matches the original uploaded file's name, or defaults to formatted.html for pasted content.