HTML Comments

Leave notes in your code and switch parts off without deleting them.

Lesson 11 of 44Beginner11 min read

A comment is a note in your code that the browser completely ignores. Comments are written for people. You use them to explain why something is there, to leave reminders, or to switch off a piece of code for a while without deleting it.

Comments become more valuable as a page grows. A 20-line page is easy to follow, but a 500-line page with a header, navigation, several sections and a footer is much easier to work on when each part is labelled. Comments also help when someone else, or you in six months, has to change the code.

HTML comment syntax

An HTML comment starts with <!-- and ends with -->. Everything in between is hidden from the page.

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

Comments can also span several lines:

HTML
<!--
  Main navigation
  Update these links when new pages are added.
-->

Make sure every <!-- has a matching -->. A missing end marker turns the rest of the file into one long comment.

Commenting out code to find bugs

"Commenting out" means wrapping working code in a comment so the browser ignores it. It's one of the quickest ways to track down a problem: switch parts off one at a time until the problem disappears, and you've found the part that causes it.

In VS Code, and in the editors on this site, select some lines and press Ctrl + / (Cmd + / on Mac) to turn them into a comment. Press the same keys again to turn them back into code.

What makes a useful comment

Good comments explain things the code can't say by itself:

  • Sections: <!-- Product list --> helps you find your way around a long file.
  • Reasons: <!-- Fixed height stops the layout jumping while images load --> explains a decision that might look strange.
  • Reminders: <!-- TODO: add the new opening hours --> flags unfinished work.

Avoid comments that repeat the obvious, such as <!-- This is a paragraph --> above a <p>. They add clutter and quickly go out of date.

Comments are public

Anything inside an HTML comment is invisible on the page, but it is not secret. Every visitor can open View Source or the developer tools and read it, and search engines download it too. That has a few practical consequences:

  • Never put passwords, API keys, private notes about customers or unreleased plans in comments.
  • Old code left in comments still downloads with the page, making it slightly bigger and harder to maintain. Delete it once you're sure you don't need it; version control such as Git keeps the history for you.
  • Comments can't hide content from a determined user. To keep a page private, protect it on the server.

Build tools used on professional sites often strip comments automatically when the site is published, so developers can write helpful notes in their source files without sending them to every visitor.

Comments in CSS and JavaScript

HTML pages often contain CSS and JavaScript, and each language has its own comment style:

LanguageComment syntax
HTML<!-- comment -->
CSS (inside <style> or .css files)/* comment */
JavaScript (inside <script> or .js files)// one line or /* several lines */

Using the wrong style is a common slip: <!-- --> inside a <style> block breaks the CSS rule that follows, and // in HTML just shows up as text on the page. Most editors add the right style for you with the keyboard shortcut Ctrl+/ (Cmd+/ on a Mac), based on where the cursor is.

HTML Comments Syntax

Comment

<!-- single line comment -->

<!--
  a comment
  across several lines
-->

HTML Comments Summary

  • HTML comments start with <!-- and end with -->.
  • The browser ignores comments, but anyone can read them in the page source.
  • Commenting out code is a simple way to find which part causes a bug.
  • Use Ctrl + / in most editors to toggle a comment.
  • Write comments that explain why, not what.

HTML Comments Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

Notes that explain the page

Run it: only the visible content appears.

<!-- Header section: logo and site name -->
<h1>Tiny Plant Shop</h1>

<!-- TODO: add real prices before launch -->
<p>Succulents from £4.</p>

<!--
  The newsletter form is coming next week.
  Ask Jo for the final wording.
-->
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1A short label that explains what the next part of the page is.
  2. Line 4A TODO comment, which is a reminder of unfinished work.
  3. Lines 7 to 10A multi-line comment.
Example 2

Switching code off

The "Sale" banner is commented out, so it doesn't show. Delete the <!-- and --> and run again to switch it on.

<h2>Welcome back!</h2>
<!-- <p><strong>SALE: 50% off everything!</strong></p> -->
<p>Browse our new arrivals below.</p>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 2The whole paragraph is inside a comment, so the browser skips it.

Common HTML Comments Mistakes

Forgetting to close the comment

Don't
<!-- Old menu
<nav>Home | About</nav>
<p>This text disappears too!</p>
Do
<!-- Old menu -->
<nav>Home | About</nav>
<p>This text shows.</p>

Without -->, everything after <!-- becomes part of the comment. Sometimes the rest of the page vanishes.

Nesting comments

Don't
<!-- outer <!-- inner --> still outer? -->
Do
<!-- outer -->
<!-- inner -->

HTML comments can't be nested. The first --> ends the comment and the rest shows on the page.

HTML Comments in Real Projects

How teams use comments

In real projects, comments mark large sections (<!-- Footer -->), explain unusual decisions (<!-- Needed for old Safari -->) and flag work in progress (<!-- TODO -->). Experienced developers don't comment the obvious. They explain the why.

HTML Comments Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Turn this line into a comment.

 Remember to add the logo here
Multiple choiceeasy

Can visitors see your HTML comments?

Fix the bugeasy

The "Contact" paragraph should be visible, but the comment above it was never closed. Fix it.

<h1>About us</h1>
<!-- We started in 2019
<p>Contact us at hello@example.com</p>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The contact paragraph is visible
  • The heading is still there

HTML Comments Quiz

3 questions to check what you learned.

  1. Which is a correct HTML comment?

    • // comment
    • <!-- comment -->
    • /* comment */
    • # comment

  2. What's the keyboard shortcut to toggle a comment in most code editors?

    • Ctrl + C
    • Ctrl + H
    • Alt + C
    • Ctrl + /

  3. Why should you never put a password in an HTML comment?

    • It will break the page
    • Comments are limited to 10 characters
    • Anyone can read it by viewing the page source
    • Browsers delete comments

HTML Comments Challenge

Hide the draft

This page has a draft paragraph that isn't ready yet. Without deleting it:

  1. Comment out the paragraph that starts with "DRAFT".
  2. Add a comment above the <h1> that says Page title.
<h1>Book Club</h1>
<p>This month we're reading "The Hobbit".</p>
<p>DRAFT: next month we might read something scary.</p>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The draft paragraph is no longer visible
  • The Hobbit paragraph is still visible
  • The heading is still visible
  • There's a comment saying "Page title"

Related HTML topics

04Elements & TagsStart tags, end tags, nesting and empty (void) elements.02HTML EditorsSet up VS Code, save an .html file and open it in your browser.03Page StructureThe DOCTYPE, html, head and body elements that every web page is built on.
Esc
↑↓ to navigateEnter to open