🗜️ HTML Minifier

Comments & Blank Lines Removed

HTML comments (<!-- ... -->) are human-readable notes that browsers ignore at render time. Minification strips them entirely. Similarly, blank lines between elements add bytes without contributing to output. Removing both typically saves 2–8 KB on a real-world page.

Whitespace Collapsed

Multiple consecutive spaces and tabs between HTML tags are collapsed to a single space or removed. Indentation applied during development is for readability only — browsers parse the DOM tree identically whether there are 4 spaces or 0 spaces between elements. Whitespace inside <pre>, <textarea>, and <code> blocks is always preserved.

Redundant Attributes Stripped

HTML5 makes certain attributes optional. type="text/javascript" on <script> tags and type="text/css" on <style> tags are both defaults — removing them is safe. Boolean attributes like disabled="disabled" can be shortened to just disabled. Redundant type="text" on input elements can also be safely dropped.

<!-- Navigation -->
<nav class="navbar">
    <ul>
        <li>
            <a href="/">Home</a>
        </li>
    </ul>
</nav>

<script type="text/javascript">
    // Init app
    var app = {};
    function init()  {
        console.log( "ready" );
    }
</script>

<nav class="navbar"><ul><li>
<a href="/">Home</a>
</li></ul></nav>
<script>var app={};
function init(){console.log("ready");}
</script>

💡 Best Practice: Build Pipeline Integration

For production workflows, integrate HTML minification into your build process rather than minifying manually every deployment. Popular tools that support HTML minification:

• html-minifier-terser — Node.js CLI & API
• Gulp + gulp-htmlmin — stream-based builds
• Webpack html-minimizer-webpack-plugin — bundler integration
• Vite built-in — minifies HTML in production mode by default
• Next.js / Nuxt — built-in HTML compression in production builds