What is the HTML Formatter & Minifier?
The HTML Formatter & Minifier is a free browser-based tool that instantly beautifies or compresses HTML code. Paste messy, single-line, or poorly indented HTML and click Format to get clean, readable output with consistent indentation — or click Minify to remove all unnecessary whitespace for a production-ready file.
Everything runs in your browser. No HTML is sent to any server, making it safe for internal or sensitive markup.
How to Use the HTML Formatter
- Paste your HTML into the input area
- Choose an Indent style: 2 spaces, 4 spaces, or tabs
- Click Format to beautify or Minify to compress
- Copy the result with the Copy button
- Click Clear to reset both fields
The character count is shown for both the input and output, so you can immediately see how much size the minifier removed.
Format vs. Minify
Format — Adds proper indentation and newlines. Block-level elements (div, section, article, p, ul, li, etc.) each get their own line. Inline elements (span, a, strong, em, code) stay on the same line as surrounding text. Self-closing tags (br, img, input, meta) are kept inline.
Minify — Removes all HTML comments, collapses multiple whitespace characters to a single space, and trims whitespace between tags. The result is a single-line file suitable for production deployment to reduce page weight.
Common Use Cases
- Template cleanup — Format HTML pasted from a CMS or design tool that comes without indentation, or clean up Markdown-converted HTML
- Email HTML — Minify HTML email templates before embedding them in your email service provider
- Code review — Beautify minified HTML from a live site to understand its structure, including embedded JSON data in script blocks
- Build pipelines — Quickly test what your minified output will look like before running a build step
HTML Quick Reference
The HTML Quick Reference panel (click “HTML Quick Reference” below the formatter) lists common elements with click-to-insert snippets. Here are the most-searched ones:
HTML Divider Line
The HTML divider is the <hr> (horizontal rule) element — a self-closing tag that renders as a full-width horizontal line:
<hr>
Style it with CSS to change color, thickness, or width:
hr {
border: none;
border-top: 2px solid #e5e7eb;
margin: 2rem 0;
}
<hr> is a block-level element. It has no text content and no closing tag in HTML5.
HTML Comments
HTML comments are hidden from the browser’s rendered output but visible in source code:
<!-- This is a comment -->
<!--
Multi-line comment.
Useful for temporarily disabling markup.
-->
The minifier strips all HTML comments by default — useful for removing dev notes before production.
Blink HTML
<blink> was a non-standard Netscape extension from the mid-1990s that made text flash on and off. It was removed from all major browsers by 2013–2015 and is not part of any HTML standard:
<blink>This text used to blink</blink> <!-- no longer works -->
If you need a blinking effect today, use a CSS animation instead:
@keyframes blink {
50% { opacity: 0; }
}
.blink {
animation: blink 1s step-start infinite;
}
Frequently Asked Questions
What is the HTML divider tag?
The HTML divider is the <hr> (horizontal rule) element. It renders as a full-width horizontal line with no closing tag required. You can style it with CSS: border, color, width, and margin. Use it to visually separate sections of content.
Is blink HTML still supported?
No. The <blink> element was a non-standard Netscape extension that made text flash on and off. It was never part of any HTML standard and was removed from all major browsers by 2013–2015. It is listed in the HTML Quick Reference below for historical reference only. Use CSS animations if you need a blinking effect today.
Does the formatter handle malformed HTML?
The formatter uses a token-based approach and will attempt to process the input even if it is not perfectly valid. Severely malformed HTML may produce unexpected indentation but will not throw an error.
Does minification affect JavaScript or CSS inside <script> or <style> tags?
Only whitespace between HTML tags is removed. The content inside <script> and <style> blocks is preserved exactly as written. For full script/style minification, use a dedicated JavaScript or CSS minifier.
For production optimization best practices, read our HTML Minification Guide.