How to Add Comments in HTML

Use HTML comments when you want to leave notes in your code that browsers will ignore. Comments are useful for marking sections, leaving reminders, and making long HTML files easier to read.

What you’ll build or solve

You’ll learn how to add comments in HTML using the correct syntax. You’ll also know where comments help and where they create clutter instead.

When this approach works best

This approach is the right choice when you need to explain part of your HTML file without changing what appears on the page.

Common real-world scenarios include:

• Labeling page sections
• Leaving reminders for future edits
• Marking temporary test code
• Explaining a tricky layout block
• Separating major content areas in large files

This is a bad idea when the comment repeats something the code already makes obvious. Too many comments can make the file harder to scan.

Prerequisites

You only need:

• A basic HTML file
• A text editor
• Basic HTML knowledge

Step-by-step instructions

Step 1: Wrap your note inside <!-- -->

Place your comment text between <!-- and -->.

<!-- Main navigation starts here -->
<nav>
  <a href="/">Home</a>
  <a href="/pricing">Pricing</a>
</nav>

You can use the same syntax to label other parts of the page.

<!-- Hero section -->
<section>
  <h1>Learn to code</h1>
  <p>Practice with guided lessons.</p>
</section>

What to look for:

• The comment appears in your HTML file but not on the page
• Start with <!-- and end with -->
• Keep comments short and useful
• Use comments for notes, labels, or reminders
• Do not put visible page content inside comments by mistake

Examples you can copy

Section label

<!-- Pricing section -->
<section>
  <h2>Pricing</h2>
  <p>Choose the plan that fits your team.</p>
</section>

Reminder comment

<!-- Replace this placeholder image before launch -->
<img src="placeholder.jpg" alt="Product preview">

Layout note

<!-- Footer links -->
<footer>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</footer>

Common mistakes and how to fix them

Mistake 1: Using the wrong comment syntax

What the reader might do:

<!- This is a comment ->

Why it breaks: HTML comments need the full opening and closing markers, or the browser may treat the line as broken markup.

Corrected approach:

<!-- This is a comment -->

Mistake 2: Putting visible content inside a comment

What the reader might do:

<!-- <h1>Welcome to our course</h1> -->

Why it breaks: anything inside the comment is hidden from the page, so users will never see that heading.

Corrected approach:

<h1>Welcome to our course</h1>

Use comments only for notes, not for content that should appear in the browser.

Mistake 3: Writing comments that state the obvious

What the reader might do:

<!-- This is a paragraph -->
<p>Learn HTML faster.</p>

Why it breaks: the comment adds no useful context and makes the file longer without helping future edits.

Corrected approach:

<!-- Intro copy for the course landing page -->
<p>Learn HTML faster.</p>

Add comments only when they explain something useful.

Troubleshooting

If text is missing from the page, check whether you accidentally wrapped it in <!-- -->.

If the HTML looks broken, confirm the comment ends with -->.

If a comment feels unnecessary, delete it and keep the code cleaner.

If the file becomes hard to scan, keep comments only around major sections or non-obvious logic.

Quick recap

• Use <!-- --> to add comments in HTML
• Comments stay in the code but do not appear on the page
• Use comments for reminders, labels, and section notes
• Do not hide visible content inside comments by mistake
• Keep comments short and actually useful