HTML Formatter
Re-indent HTML by nesting depth, keep inline elements flowing, and minify without corrupting pre and script content.
Hand-formatted HTML drifts: the indentation gets shallow, the closing tags wander, and before long a template is impossible to diff. This formatter re-indents markup by nesting depth and keeps the layout conventions that make templates readable - block elements break onto their own lines while inline elements like span, a and strong stay inside the text flow.
Short elements stay compact. A paragraph with a few inline children remains a single line, while anything that contains a block element is expanded to one tag per line. This matches how developers actually write templates, so the output looks like careful human formatting rather than machine output.
Minify mode collapses the markup to a compact string - comments removed, whitespace collapsed - while the content of pre, script, style and textarea is preserved verbatim so code blocks and inline styles are not corrupted. All of it happens locally in your browser.
Because everything runs in the browser, templates that contain customer data, internal placeholders or unpublished markup never leave the page. You can format a fragment copied from a live page, a framework template or a static file with the same confidence that nothing is being recorded.
Features
- Block elements on their own lines; inline elements (span, a, b, strong, em) flow with the text.
- Short blocks such as <p>Hello <strong>world</strong></p> stay on a single line.
- pre, script, style and textarea contents preserved verbatim.
- Minify removes comments and collapses whitespace without touching preserved content.
- Optional toggle to force every element onto its own line.
- Mismatched-tag errors name the offending line and the tag that was expected.
How to Use
- 1
Paste the markup
Drop a full page or a fragment into the input box; partial snippets are fine because unclosed tags are tolerated.
- 2
Choose the options
Leave inline elements flowing for the standard style, or uncheck the box to force every tag onto its own line.
- 3
Format or minify
Press Format to beautify, or switch to Minify for a compact single-line version of the markup.
- 4
Copy or download
Export the result as an .html file or copy it straight into your editor.
Example
Before
<div><p>Hello <strong>world</strong></p><ul><li>one</li></ul></div>↓
<div>
<p>Hello <strong>world</strong></p>
<ul>
<li>one</li>
</ul>
</div>Common Problems
Unclosed tags are tolerated
Fragments like <ul><li>one<li>two</ul> format as sibling list items because the parser knows an li opens closes the previous li; a missing closing tag is not treated as an error.
Mismatched closing tags
A closing </div> where a </p> was expected is reported with both line numbers, so a copy-paste or hand-typed close is found immediately.
Attributes with runs of spaces
Internal whitespace inside a tag is collapsed to single spaces, so a class with double spaces is normalized without changing which classes are applied.
Void elements
br, img, input, hr and the other void elements are recognized and never wait for a closing tag; after a block parent they sit on their own line.
Content inside pre
The content of pre and textarea is treated as literal text and never re-indented, so code examples and submitted forms come back byte-identical.
Comments between elements
HTML comments are kept and placed on their own line at the correct depth during formatting; minify mode removes them.
Mixed block and inline content
A div that contains both a block child and stray text keeps the text attached to the block line, matching the tolerance of real browsers.
Doctype and leading comments
The doctype and any comments before the root element are placed at the top with no stray indentation, so the formatted document still starts with exactly what browsers expect.
Technical Details
The formatter tokenizes HTML into open, close, text, comment, doctype and CDATA tokens, then re-emits with an explicit stack that tracks each open frame, its source line and whether it already contains a block-level child.
The short-block rule closes an element inline when it has no block children and its content still fits on the current line, which is what produces compact <p>Hello <strong>world</strong></p> output.
Implicitly closed elements - li, p, dt, dd, td, th, tr, option and the table section tags - are popped automatically when a sibling of the same kind opens, so hand-written markup without closing tags formats correctly.
When an inline element arrives, the parent is consulted: the inline element flows on the current line unless a block child has already switched the parent to line-based layout.
Preserved elements (pre, textarea, script, style) are emitted verbatim; the structural newline right after the opening tag is dropped, but everything else is untouched.
Text runs between tags are emitted with surrounding whitespace collapsed to a single space, so minified markup never glues adjacent words together, while a run of only whitespace is dropped at a line boundary.
All formatting runs synchronously in the browser. Markup is never transmitted, stored or logged.
Frequently Asked Questions
Why is my pre block not indented?
The content of pre and textarea is treated as literal: re-indenting it would change the code you are displaying. Only the tag itself is indented; the content stays byte-for-byte.
Will it rewrite my attributes?
No. Tags are normalized only for internal whitespace so the output is consistent, but attribute names, values and order are untouched.
Can I format just a snippet?
Yes. The parser tolerates unclosed tags and formats partial documents exactly like full pages, which makes it useful for a fragment you are about to drop into a component as well as a whole page.
Does minify keep the pre content?
Yes - whitespace in pre, script, style and textarea is preserved even in minified output, because collapsing it would change the rendered page.
Why did my closing tag not match?
The formatter reports the line of the closing tag and the line where the actual open tag sits, so the typo is found in seconds.
Is my HTML uploaded?
No. Formatting is 100% client-side; nothing leaves the browser, which keeps the tool usable even in environments where uploading is not allowed.
What does "keep inline elements" do?
When enabled, inline tags like strong and a stay on the same line as surrounding text. When disabled, every tag is placed on its own line at the correct depth.
Data & Privacy
Your data stays in your browser. Nothing is uploaded.
- Processing
- Local
- Upload
- None
- Server Storage
- None
- Account
- Not required
Related Tools
SQL Formatter
Beautify messy SQL with clause-aware indentation, choose UPPER or lower keywords, and minify a query to a single line.
Code & Formatting
CSS Formatter
Give every CSS declaration its own line, indent nested at-rules, normalize hex colors and minify without corrupting strings.
Code & Formatting
JavaScript Formatter
Normalize JS indentation, spacing and brace layout - or minify it - while preserving your semicolons, quotes and structure.
Code & Formatting
Markdown Preview
Live Markdown preview with GFM tables, fenced code and nested lists - plus copy or download the generated HTML.
Code & Formatting
HTML Entity Encoder / Decoder
Convert HTML to its escaped entity form or decode entities back to readable markup.
Encoding & Conversion
JSON Formatter
Format, validate and beautify JSON directly in your browser.
JSON & Data