HTML Comments Guide — Syntax, Uses, and When Minifiers Remove Them

HTML comments document your markup for developers but add bytes to the response. HTML minifiers remove regular comments, but preserve IE conditional comments when configured correctly.

Use the HTML Minifier to remove comments and reduce HTML file size.

Comment syntax

<!-- This is an HTML comment -->

<!-- 
  Multi-line comment
  spanning several lines
-->

<!-- TODO: Fix the nav on mobile -->

<!-- 
  IMPORTANT: Don't change the order of these scripts —
  plugin B depends on plugin A being initialized first
-->

HTML has only one comment format (unlike CSS with /* */ or JS with //).

What minifiers do with comments

<!-- Before minification: -->
<div>
  <!-- Main content area -->
  <p>Hello World</p>
  <!-- End main content -->
</div>

<!-- After minification (removeComments: true): -->
<div><p>Hello World</p></div>

<!-- Regular comments: removed -->
<!-- IE conditional comments: PRESERVED by default -->

IE conditional comments (legacy)

Conditional comments target specific IE versions and must NOT be removed:

<!-- Targeting IE 6-9 (now rare): -->
<!--[if IE]>
  <link rel="stylesheet" href="ie-fixes.css">
<![endif]-->

<!--[if lt IE 9]>
  <script src="html5shiv.js"></script>
<![endif]-->

<!--[if IE 8]>
  <p>You're using IE 8. Please upgrade.</p>
<![endif]-->

<!--[if (gt IE 8)|(!IE)]><!--> 
  <!-- This SHOWS in IE 9+ and non-IE browsers -->
  <p>Modern browser content</p>
<!--<![endif]-->

IE conditional comments are only recognized by IE 5-9. All other browsers (including IE 10+) treat them as regular comments.

HTML minifiers with removeComments: true should keep conditional comments. In html-minifier-terser:

await minify(html, {
  removeComments: true,                    // Remove regular comments
  removeCommentsFromCDATA: true,
  // Conditional comments are preserved by default
});

Legitimate comment uses (before build)

Comments in source HTML (before minification) are fine:

<!-- Template sections: -->
<!-- =================== HEADER =================== -->
<header>...</header>

<!-- =================== MAIN CONTENT =================== -->
<main>...</main>

<!-- Component: ProductCard
  Props: product (object), variant ('compact'|'full')
  Used in: shop-grid.html, homepage.html
-->
<div class="product-card">...</div>

<!-- TODO: Replace with dynamic data from API -->
<p>Placeholder text</p>

What NOT to comment in HTML

<!-- Don't comment out large blocks for testing — use version control instead -->
<!-- 
  <section class="old-hero">
    ... 200 lines ...
  </section>
-->

<!-- Don't leave debug info in production -->
<!-- Debug: user ID = 12345, session = abc123 -->
<!-- Generated at: 2026-05-11 14:23:11 UTC -->

<!-- Don't explain obvious HTML -->
<!-- The paragraph below: -->
<p>Hello</p>

HTML comment edge cases

<!-- This IS valid: nested -- in comment body -->
<!-- This is -- a comment with dashes -- inside -->

<!-- This is INVALID (double dash closes comment): -->
<!-- bad -- comment -- here -->

<!-- In older browsers, script content was wrapped in comments: -->
<script>
<!--
  var x = 1;  // Old Netscape technique
//-->
</script>

<!-- In CSS: -->
<style>
/*
  CSS uses C-style comments, not HTML comments
  <!-- This would NOT be a comment in CSS! -->
*/
</style>

Server-side comments vs HTML comments

HTML comments are visible in View Source. If you need comments that never reach the client:

<!-- This goes to the browser (visible in View Source) -->

{% comment %}Django/Jinja2 template comment — not sent to browser{% endcomment %}
{{!-- Handlebars comment — not rendered --}}
<%-- JSP comment — not sent to browser --%>
<?php /* PHP comment — not sent to browser */ ?>

Use template-level comments for notes that shouldn’t be in the page source.

Related tools

• HTML Minifier — remove comments and whitespace
• HTML Whitespace Removal — browser whitespace handling
• HTML Minification Performance — impact on Core Web Vitals