How to Comment in HTML- A Simple Guide

What Is an HTML Comment?

An HTML comment is a piece of code that browsers ignore completely. It won't show up on your website. It won't affect how your page renders. It's purely for developers.

Think of comments as notes you leave for yourself or other developers. They're invisible to the public but visible in your source code.

Why Bother With Comments?

You might wonder why you'd add something that doesn't do anything visible. Here's why:

Remember why you made certain decisions — six months later, you won't remember
Communicate with your team — explain complex sections to other developers
Debug code — temporarily disable sections without deleting them
Organize large files — mark sections so you can navigate faster

The Basic Syntax

HTML comments use a specific format. It starts with . Everything between those markers gets ignored.

<!-- This is a comment -->

That's it. Simple.

How to Add Comments in HTML

Single-Line Comments

For short notes, keep it on one line:

<!-- Main navigation starts here -->
<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
</nav>

Multi-Line Comments

When you need more room, span multiple lines:

<!-- 
    TODO: Update this section when
    the new design mockups are ready.
    Reference: Figma file #4521
-->
<section class="hero">
    <h1>Welcome</h1>
</section>

Commenting Out Code

You can hide code temporarily by wrapping it in comment tags. This is useful for testing:

<!-- <div class="old-banner">
    This won't show on the page
</div> -->

⚠️ Warning: Don't use this for hiding sensitive information. Anyone can view your source code and see commented content.

Where to Use HTML Comments

Section dividers — mark different parts of your page
TODO notes — flag things that need work later
Code explanations — explain non-obvious logic
Version markers — track when major changes happened
Conditional comments — target specific browsers (older IE)

Comment Syntax Across Languages

Comments work differently in other languages. Here's a quick comparison:

Language	Single Line	Multi-Line
HTML	<!-- comment -->	<!-- comment line 2 -->
CSS	/* comment */	/* comment line 2 */
JavaScript	// comment	/* comment line 2 */
Python	# comment	""" comment line 2 """

Common Mistakes to Avoid

Don't nest comments

This breaks:

<!-- outer <!-- inner --> comment -->

The browser will see the first --> and stop there. Your comment will leak onto the page.

Don't include sensitive data

Never put passwords, API keys, or personal info in comments. Anyone can right-click and view source.

Don't over-comment

Comments like this waste your time:

<div> <!-- opening div tag -->
    <p>Text here.</p> <!-- paragraph with text -->
</div> <!-- closing div tag -->

Nobody needs that. Comment to explain why, not what. The code shows what. Comments show intent.

Best Practices

Keep comments up to date — outdated comments are worse than no comments
Use consistent formatting across your project
Delete obvious comments after you're done with them
Use TODO markers so you can search for them later:

Quick Reference

Bookmark this syntax:

<!-- YOUR COMMENT HERE -->

That's the only syntax you need for HTML comments. It works everywhere — in <head>, in <body>, inside elements, between elements. The browser just skips over it.

Wrapping Up

HTML comments are a basic tool, but they make your code maintainable. Use them to leave notes for yourself and your team. Keep them short, keep them relevant, and delete them when they outlive their usefulness.

Now go add some comments to that messy HTML file. 📝