HTML Formatter Online
Beautify or minify HTML instantly in your browser.
When an HTML formatter is the right tool
HTML often arrives messy: a copied fragment, a minified template, or a page exported with inconsistent indent. A formatter is for that moment. You paste the markup, choose Beautify or Minify, and get a rewritten copy. Beautify puts tags and text on separate indented lines. Minify strips comments and collapses whitespace. The output updates as you type.
This is not a browser parse and not a DOM pretty-printer. Unclosed tags are not repaired, and a doctype can shift the indent of the whole document. If you need to compare two versions, use HTML Diff. If the file is well-formed XML, the XML Formatter is usually a better fit.
Use cases
Reading a minified page or a component
A template on one line is hard to scan. Beautify makes headings, lists, and nested sections visible as indented blocks. Load Sample pastes a short complete page if you want to see the result first.
Producing a compact copy
Minify is useful when you want a smaller paste and you do not rely on spacing inside pre or script. There is also a dedicated HTML Minifier if you only need compression. Check the output when those elements matter.
Tidying a fragment before a diff
You can format two copies here and then compare them on the HTML Diff page. Remember that this rewrite changes wrapping, so a line diff will still show formatting changes unless you format both sides the same way.
How formatting works
The input is split into comments (<!-- ... -->), tags, and text. Beautify writes each token on its own line. Void tags (including br, img, meta, link, and input) do not increase indent. A fixed set of inline tags also leaves the indent unchanged, but they still appear on their own lines. Other opening tags increase the level until the matching close. Indent is 2 or 4 spaces and applies only in Beautify mode; the default is 2.
Minify removes comments, then collapses whitespace, including space between tags. Empty input leaves the output empty. You can copy the result when it is present.
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<head>
<meta charset="UTF-8">
<title>
Sample
</title>
</head>After Beautify, <meta> does not push the following <title> deeper, because meta is treated as a void tag. The title text is still placed on its own indented line.
What this tool does not do
It does not parse HTML as a browser would, fix missing end tags, or keep <pre> and <script> whitespace intact when you minify. A doctype typically adds an extra indent level for the rest of the document. Nothing is sent to a server. To review the same markup as Markdown, try HTML to Markdown.
How to use HTML Formatter
- Paste your HTML into the input pane. The output updates as you type.
- Choose Beautify to indent, or Minify to compact the text. In Beautify mode, pick 2- or 4-space indent.
- Copy the result when it looks right. Use Load Sample to try a short page, or Clear to start over.
Frequently asked questions
Does this page parse HTML the way a browser does?
No. It uses a simple tokenizer: comments, tags, and text. It does not build a DOM, fix unclosed tags, or run the HTML parsing algorithm. Invalid or incomplete HTML is still rewritten as tokens.
How does Beautify decide the indent?
Each tag or text node is written on its own line at the current level. Void tags such as br, img, meta, and input do not increase the level, and neither do a set of inline tags such as a, span, strong, and em. Other opening tags increase the level until their closing tag. Comments are kept and indented at the current level.
Why is the whole document indented one level after a doctype?
A <!DOCTYPE html> declaration is not treated as a void or inline tag, so the tokenizer increments the indent after it. The <html> element and everything inside it then start one level deeper than you might expect. That is a quirk of this formatter, not a requirement of HTML.
What does Minify change?
It removes <!-- --> comments, collapses runs of whitespace to a single space, and removes space between tags. It does not special-case pre, script, style, or textarea, so significant whitespace in those elements can be lost.
Are inline elements kept on the same line as the surrounding text?
No. “Inline” here only means the indent level does not change. A tag such as <strong> still gets its own line, and the text inside it is usually on the next line at the same indent.
Is my HTML sent to a server?
No. Formatting runs in your browser as you type. Closing the tab discards what you pasted. Do not paste pages that contain secrets or private user data if you would not be comfortable with them sitting in memory on this device.
Is there a file size limit?
There is no server-imposed limit, because nothing is uploaded. A few thousand lines is comfortable. A large exported page can make the tab feel slow; in that case, format a smaller fragment or use a local tool.
Related tools and guides
References
- The HTML Living Standard defines void elements and how browsers parse markup. This page uses a short list of void tags and a simple tokenizer; it does not implement that parser.
- For a structural comparison of two HTML files, the HTML Diff page is the better starting point than formatting each file by eye.