HTML Comments

Comments let you leave notes in your code that the browser completely ignores. They’re useful for explaining your markup, temporarily disabling code, and marking sections in long files.

Concept 1 — Comment syntax

An HTML comment opens with . Everything between those markers is invisible to the user — it won’t render, won’t affect layout, and won’t appear on screen.

<!-- This is a comment. The browser ignores it. -->

<p>This paragraph is visible.</p>

<!-- <p>This paragraph is disabled.</p> -->

Comments can go anywhere in an HTML document — inside <head>, inside <body>, between tags, even on the same line as content.

Concept 2 — Inline vs block comments

A comment can sit on its own line or inline within content.

<!-- Section: navigation -->
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

<p>Price: <!-- TODO: pull from database --> $9.99</p>

Multi-line comments work by simply placing the closing --> on a later line:

<!--
  This whole block is commented out.
  Nothing here will render in the browser.
  <p>Not this.</p>
  <p>Or this.</p>
-->

Concept 3 — Practical uses

Labelling sections — large HTML files can become hard to navigate. Comments act as signposts.

<!-- ===================== HEADER ===================== -->
<header>...</header>

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

<!-- ===================== FOOTER ===================== -->
<footer>...</footer>

Temporarily disabling code — comment out a block instead of deleting it while you test something.

<!-- Hiding this section until the redesign is ready
<section class="promo-banner">
  <p>Summer sale — 20% off everything!</p>
</section>
-->

Leaving notes for collaborators — flag things that need attention.

<!-- TODO: replace placeholder image with final asset -->
<img src="placeholder.jpg" alt="Product photo">

<!-- FIXME: this link 404s in production -->
<a href="/old-page">Read more</a>

Concept 4 — Comments are not secure

Comments are invisible on screen but are fully visible in the page source. Anyone can open DevTools or view-source and read every comment you’ve written.

<!-- DO NOT DO THIS -->
<!-- Admin password: hunter2 -->
<!-- API key: sk-abc123xyz -->

Never put passwords, keys, internal notes about bugs, or anything sensitive in an HTML comment. Strip them out before deploying to production.

Concept 5 — Comments don’t nest

HTML comments cannot be nested. If you try, the comment closes at the first --> it finds, which can produce unexpected results.

<!-- Outer comment
  <!-- Inner comment -->   ← this closes the outer comment here
  This text is now visible, not commented out.
-->                        ← this stray marker can cause a parse error

If you need to comment out a block that already contains a comment, remove the inner comment first.

Try it yourself

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Comments demo</title>
</head>
<body>

  <!-- Page header -->
  <h1>My page</h1>

  <!-- Main content section -->
  <p>This paragraph is visible.</p>

  <!-- TODO: add a second paragraph here -->

  <!-- Temporarily disabled:
  <p>This paragraph won't show up.</p>
  -->

</body>
</html>

View the page in a browser — the commented content is invisible. Then right-click anywhere and choose “View page source” to see it in the raw HTML.

Quick reference

Syntax	Purpose
`<!-- comment -->`	Single-line comment
`<!-- ... -->` across lines	Multi-line comment
Comment out a tag	Disable without deleting
Section labels	Navigate large files
`TODO:` / `FIXME:`	Flag work in progress
Never in comments	Passwords, keys, sensitive data