</>
Skip to content
HTML lessons (12/60)

HTML — Comments

Notes the browser ignores

Comments are messages in your code that browsers completely ignore. They start with <!-- and end with -->:

<!-- This is a comment. Visitors never see it. -->
<p>This is visible.</p>

What the browser displays

This is visible.

(The comment vanished — only the paragraph renders.)

Comments can span multiple lines too:

<!--
    This is a longer explanation.
    It can cover as many lines
    as you need.
-->
<p>Still visible.</p>

What comments are actually for

1. Leaving notes for future-you

Code that seems obvious today becomes mysterious in three months. Comments answer why, not just what:

<!-- TODO: replace placeholder with real logo before launch -->
<img src="placeholder.png" alt="Logo">

<!-- Using em units here so the banner scales with user font size -->
<div class="banner">...</div>

<!-- Workaround: Safari needs this wrapper, remove when fixed -->
<div class="safari-fix">
    <video controls></video>
</div>

Professional codebases are full of comments explaining decisions. "Why did I do this?" is the most expensive question in software — cheap comments prevent it.

2. Marking sections of long pages

Real pages get long. Comments act as signposts:

<body>

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

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

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

</body>

Scrolling through 500 lines hunting for the footer? The section markers make it a five-second task.

3. Temporarily switching code off

Wrap anything in comments to disable it without deleting it:

<!--
<div class="old-banner">
    Seasonal sale! Everything must go!
</div>
-->

Refresh the page and the banner is gone. Bring it back by deleting just the two marker lines.

This is invaluable while debugging:

<p>The layout breaks below here.</p>
<!--
<aside class="sidebar">
    <p>Suspected troublemaker</p>
</aside>
-->
<p>Did removing the sidebar fix it?</p>

Comment out a suspect → refresh → check → restore or delete. A primitive but genuinely effective debugging technique.

Comment rules

Rule 1: Comments cannot nest

The first --> ends the comment, no matter how many <!-- came before:

<!-- outer comment
<!-- inner comment -->
still inside? NO — this text is now LIVE HTML!
-->

Everything after the first --> suddenly renders as page content. This causes real bugs.

When commenting out code that already contains comments, this bites hard:

<!--
<div>Featured section</div>
<!-- old version kept for reference -->
<div>New section</div>
-->

The middle --> terminates everything; <div>New section</div> renders live. To hide such blocks, temporarily strip inner comments or delete them.

Rule 2: Never hide secrets in comments

Anyone can right-click your page → "View Source" and read every comment:

<!-- WRONG: API_KEY=sk-live-abc123  ← publicly readable! -->
<!-- WRONG: TODO: change admin password from 'hunter2' -->

Comments ship to every visitor. Secrets belong in server-side configuration, never client-side anything.

Rule 3: Don't comment obvious things

Balance matters. These waste space:

<!-- This is a heading -->
<h1>About Us</h1>
<!-- This is a paragraph -->
<p>We build websites.</p>

The tags already say what they are. Comment the non-obvious: intent, warnings, workarounds, open questions.

Conditional comments (historical footnote)

Old Internet Explorer supported special comments as feature switches:

<!--[if IE]>
    <p>You are using Internet Explorer.</p>
<![endif]-->

Other browsers saw a harmless comment; IE executed the content. All modern browsers ignore these entirely — you'll only meet them in legacy code.

Mini Practice

  1. Create notes.html with three sections separated by <!-- SECTION --> style markers
  2. Add a TODO comment listing one thing you want to learn next
  3. Build a paragraph, then comment it out and confirm it disappears
  4. Try nesting a comment inside a comment — watch exactly where the browser resumes rendering

Understanding failure #4 deeply will save you a confusing afternoon someday.

Next: colors →

Related Topics

QuotationsColorsCSSLinks

Frequently Asked Questions about Comments

What is Comments in HTML?

Comments is a fundamental concept in HTML. This lesson explains it step by step with clear examples, making it easy for beginners to understand.

How do I learn Comments?

Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn Comments.

Why is Comments important in HTML?

Comments is essential for HTML development. Understanding this concept will help you write better code and solve real-world problems more effectively.