HTML Formatter and Beautifier Online
Format HTML markup with consistent indentation so nested elements are easier to read. Paste a snippet and review the formatted output.
HTML Formatter workspace
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.
Local input processing
All processing runs locally in your browser. Your markup is never uploaded or logged.
Format HTML Online: Free HTML Beautifier & Minifier
Format HTML markup with consistent indentation so nested elements are easier to read. Paste a snippet and review the formatted output. A formatter does not certify valid HTML or remove unsafe content. Whitespace can matter in text nodes and preformatted elements. Check the result in the intended document, especially around inline elements, scripts, styles, and template syntax.
How to use the HTML formatter
- Paste your HTML into the HTML Input panel, or click Example to load a sample document.
- Leave the toggle on Beautify to indent the markup, or switch to Minify to strip whitespace and comments.
- Read the formatted result in the right panel. The output updates as you type, with no button press needed.
- Check the stats bar for the original size, the new size, and the savings or increase percentage.
- 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.
| Tag | Purpose |
|---|---|
| <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
| Operation | Beautify | Minify |
|---|---|---|
| Indentation | Adds 2 spaces per depth level | Removes all indentation |
| Whitespace between tags | Normalized to line breaks | Stripped (>< touching) |
| HTML comments | Kept | Removed (except conditional) |
| Spaces around attribute = | Kept | Removed |
| Best for | Reading, debugging, code review | Production payloads, faster LCP |
Related frontend & formatting tools
Indent and clean your stylesheets
CSS MinifierShrink CSS for production
JavaScript MinifierCompress JS bundles
XML FormatterIndent XML and sitemaps
JSON FormatterValidate template data
HTML to JSXPort markup into React
HTML Entity ConverterEncode and decode entities
Markdown to HTMLConvert Markdown to markup
Meta Tag PreviewerCheck head metadata
Color Contrast CheckerAudit WCAG accessibility
Diff CheckerCompare two HTML versions
UUID GeneratorGenerate unique element IDs
New to markup hygiene? Read our developer tools guides on clean code and frontend formatting.
Last updated: September 15, 2026 · Runs 100% in your browser — no uploads, tool input is not sent to Toolk.
Frequently asked questions
Will beautifying my HTML change how the page renders?
Almost never — with one documented exception. Indentation only touches inter-tag whitespace, which browsers collapse in normal flow. The risk is whitespace-significant elements: content inside <pre>, <textarea>, or anything styled white-space: pre renders verbatim, so collapsing it visibly changes the page. Format around those blocks, not through them.
Why do void elements like <img> and <br> get special treatment?
The WHATWG HTML Standard defines exactly thirteen void elements that have no closing tag, so they must never open an indentation level. This formatter keeps each of them on its own line as a leaf and never nests content beneath them — treating them as containers is the classic beautifier mistake.
Does minify remove my Outlook conditional comments?
No. Regular <!-- comments --> are stripped because browsers discard them anyway, but downlevel-revealed conditional comments such as <!--[if mso]> are preserved intact since Outlook email rendering still depends on them.
Is unreleased markup uploaded while I format?
No. Parsing, indentation, and minification all run locally in your browser tab, and Toolk’s page analytics do not receive the markup you paste. Pre-launch pages stay private, and formatting continues to work offline once loaded.
How do I format embedded JSON inside a script tag safely?
Do not run the whole document through a whitespace-collapsing formatter for that payload. Extract the JSON, clean it with Toolk’s JSON Formatter (/tools/json-formatter), then paste it back — same idea applies to XML blocks with the XML Formatter.