Does minifying HTML change how the page looks?

Not with default styles: whitespace is removed only next to block elements, where a browser does not show it. The tool cannot see your CSS, so whitespace between elements you styled as inline-block, or text styled with white-space: pre, may be changed.

Why is the space between two links kept?

Links, bold and other inline elements sit in a line of text, and the space between them is shown. Home , a line break and an indented About become Home About : one space, not none. Without it the two words would run together.

Can I keep the comments?

Yes: untick "Remove comments". The example page then goes from 448 to 367 characters, 18.1% saved. Conditional comments such as are always kept.

How large a file can I minify?

Up to 2,000,000 characters. Above 100,000 the work moves to a background worker so the page keeps responding while it runs.

HTML Minifier

Paste HTML to drop comments and collapse whitespace. The space between inline elements stays, pre and textarea are kept, and inline CSS and JS can be minified. How it works

HTML Input

Remove comments (conditional comments are always kept)Minify inline CSS and JavaScript

Minified Output

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Example page</title><!--[if IE]><link rel="stylesheet" href="ie.css"><![endif]--></head><body><div class="card" id="main"><p>Read the <a href="/docs">docs</a> <b>today</b>, or see the&nbsp;<i>demo</i>.</p><pre>
  keep   this   spacing
      </pre></div></body></html>

448 characters before, 333 after: 25.7% saved.

Collapses whitespace in text and between attributes and removes the whitespace next to block elements (div, p, li, td, br, ...), assuming their default display. One space between two inline elements (<b>a</b> <i>b</i>) stays, and so do no-break spaces, attribute values, conditional comments and the content of pre, textarea, script and style (unless you tick Minify inline CSS and JavaScript, which runs plain CSS and JavaScript blocks through the CSS and JavaScript minifiers and leaves a block unchanged when they report a problem; JSON, import maps and template types are never touched). Content styled with white-space: pre is not detected. Input up to 2,000,000 characters; above 100,000 it runs in a background worker. Your code is minified in this browser tab and is not sent to a server.

About the HTML Minifier

The HTML minifier removes comments, collapses runs of whitespace to one space and drops the whitespace next to block elements such as div, p and li: the example page it opens with goes from 448 to 333 characters, 25.7% saved. The space between two inline elements stays, and the content of pre and textarea, attribute values and conditional comments are copied unchanged. Script and style blocks are copied as they are too, unless you tick Minify inline CSS and JavaScript.

Before and after

Input	Output
<div> ⏎ <p>Hello</p> ⏎ </div>	<div><p>Hello</p></div>
<ul> ⏎ <li>One</li> ⏎ <li>Two</li> ⏎ </ul>	<ul><li>One</li><li>Two</li></ul>
<p>a ⏎ b</p>	<p>a b</p>
<b>a</b> <i>b</i>	<b>a</b> <i>b</i>
<span>a</span> ⏎ <span>b</span>	<span>a</span> <span>b</span>
<div class="a" id="b">x</div>	<div class="a" id="b">x</div>
<input type="text" value="a b">	<input type="text" value="a b">
<pre> a b </pre>	<pre> a b </pre>
<p>a <script>x()</script> b</p>	<p>a <script>x()</script> b</p>
<!-- x --><p>a</p>	<p>a</p>
<!--[if IE]><p>x</p><![endif]-->	<!--[if IE]><p>x</p><![endif]-->

⏎ marks a line break in the input. In the body a script or style element keeps a space on each side, because the words around it still need it; inside <head> the whitespace around meta, link, script and style is removed.

With Minify inline CSS and JavaScript ticked

Input	Output
<style> ⏎ p { color: red; } ⏎ </style>	<style>p{color:red}</style>
<script> ⏎ // say hi ⏎ console.log( "hi" ); ⏎ </script>	<script>console.log("hi");</script>
<script type="application/json">{ "a": 1 }</script>	<script type="application/json">{ "a": 1 }</script>

Off by default. Only plain CSS and JavaScript blocks are minified (no type, text/css, text/javascript, application/javascript or module); JSON and other data blocks stay as they are.

Frequently asked questions

Does minifying HTML change how the page looks?: Not with default styles: whitespace is removed only next to block elements, where a browser does not show it. The tool cannot see your CSS, so whitespace between elements you styled as inline-block, or text styled with white-space: pre, may be changed.
Why is the space between two links kept?: Links, bold and other inline elements sit in a line of text, and the space between them is shown. <a href="/x">Home</a>, a line break and an indented <a href="/y">About</a> become <a href="/x">Home</a> <a href="/y">About</a>: one space, not none. Without it the two words would run together.
Can I keep the comments?: Yes: untick "Remove comments". The example page then goes from 448 to 367 characters, 18.1% saved. Conditional comments such as <!--[if IE]> are always kept.
How large a file can I minify?: Up to 2,000,000 characters. Above 100,000 the work moves to a background worker so the page keeps responding while it runs.
Can it minify the CSS and JavaScript inside the HTML?: Yes, if you tick Minify inline CSS and JavaScript. Style and script blocks then go through the CSS and JavaScript minifiers, so <style> p { color: red; } </style> becomes <style>p{color:red}</style>. JSON, import maps and template blocks are never changed, and a block whose minifier reports a problem is kept as it was, with a note saying how many.

When to minify HTML

Use it to shrink a static page, a template or an HTML snippet before you paste it into a CMS, or to see how much of a file is indentation and comments. The example page the tool opens with goes from 448 to 333 characters, 25.7% saved.

Where whitespace can go

A run of spaces, tabs and line breaks in text is shown as one space, so the minifier collapses it to one. Whitespace next to a block element (div, p, li, td, br and the like) is removed, because with default styles it is not shown there. A single space between two inline elements stays: <b>a</b> <i>b</i> keeps its gap. Comments are removed unless you untick Remove comments. Conditional comments, the doctype, no-break spaces, attribute values and the content of pre, textarea, script and style are copied byte for byte. Tick Minify inline CSS and JavaScript to send plain style and script blocks through the site's CSS and JavaScript minifiers: p { color: red; } becomes p{color:red}. JSON, import maps and template script types are never touched, and a block is left as it was when its minifier reports a problem.

Example: <ul>, two indented <li> lines and </ul> on four lines become <ul><li>One</li><li>Two</li></ul>, and <div class="a" id="b"> becomes <div class="a" id="b">.

The tool assumes every element keeps its default display; text styled with white-space: pre is not detected.

Related Tools

View all tools

Dev

CSS Minifier

Paste CSS to remove comments and unneeded whitespace while keeping descendant spaces, calc() operators and /*! */ license comments, with the characters saved.

Dev

JS Minifier

Paste JavaScript to remove comments and unneeded whitespace. Line breaks the code relies on and /*! license comments stay; variable names are not shortened.

Dev

SQL Query Formatter

Format SQL for Standard SQL, PostgreSQL, MySQL, SQLite or SQL Server, with keywords kept, upper-cased or lower-cased and 2-space, 4-space or tab indents.

Dev

XML Formatter

Format or minify XML with 2 spaces, 4 spaces or tabs. Comments, CDATA, DOCTYPE, attribute values and mixed content stay as written, up to 300,000 characters.

Dev

HTML Entity Encoder

Encode text to HTML entities (& < > " ') or decode any of the 2,231 named references in the HTML standard and numeric ones such as é.

Dev

HTML Sanitizer

Sanitize pasted HTML at Strict, Moderate or Permissive level: scripts, event handlers and javascript: links are removed, and the tool lists what it took out.