HTMLComments (<!-- -->)

Comments (<!-- -->)

HTML comments let you leave notes in your markup, or temporarily disable a block of content, without affecting what's rendered on the page.

The syntax

HTML
<!-- This is a comment. The browser ignores it when rendering. -->
<p>This paragraph is visible.</p>

  • A comment starts with <code><!--</code> and ends with <code>--></code>.

  • Everything between those markers is ignored by the browser's renderer.

  • Comments can span multiple lines.

HTML
<!--
  TODO: replace this placeholder image before launch.
  Ticket: PROJ-482
-->
<img src="placeholder.png" alt="Coming soon" />
Comments aren't rendered — but they ARE sent to the client

This is the single most important thing to understand about HTML comments, and it's genuinely different from how comments work on the server: an HTML comment is not stripped out before the page reaches the browser. It travels over the network inside the HTML response, and it's visible to anyone who views the page source.

Never put secrets or sensitive notes in HTML comments
Internal notes like "TODO: this endpoint has no auth check yet" or commented-out API keys are visible to any visitor who opens View Source or DevTools. Anything genuinely sensitive belongs in server-side code, environment variables, or private documentation — never in HTML comments.

Compare this to a server-side templating language (like PHP, or a backend templating engine), where comments are stripped out before the response is ever sent — the client never sees them at all. HTML comments are a client-visible annotation, not a private one.

Commenting out a block of markup

Comments are also a handy way to temporarily disable a chunk of markup while debugging or experimenting, without deleting it:

HTML
<nav>
  <a href="/">Home</a>
  <a href="/shop">Shop</a>
  <!--
  <a href="/beta-feature">Beta Feature</a>
  -->
</nav>
A nested-comment gotcha
HTML comments cannot be nested — putting <!-- inside another comment ends the *outer* comment at the first --> it finds, not where you might expect. If the block you're disabling already contains a comment, remove or adjust it first.
Conditional comments: a dead IE relic

For years, Internet Explorer (versions 5 through 9) supported a special syntax called conditional comments, letting developers target IE-only fixes:

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

This worked because Internet Explorer's parser specifically recognized the [if ...] syntax inside a comment, while every other browser just saw a plain, ignored HTML comment. Microsoft dropped support for conditional comments starting with Internet Explorer 10, and with IE itself now fully discontinued, you will only ever encounter this in legacy codebases — never write new code that relies on it.

Good comments explain why, not what
Use HTML comments to mark sections of a long page (<!-- End header -->), leave TODOs, or explain non-obvious markup decisions — not to restate what a tag obviously already does.

Comments don't take up visual space, but plenty of your actual markup's whitespace doesn't either. Next, we'll look at exactly how HTML collapses whitespace, and why your source indentation doesn't create visual spacing on its own.