HTML Comment Tag: A Step-by-Step Guide

The HTML Comment Tag is one of the simplest but most useful features in HTML. It allows developers to write notes inside their code that are not displayed in the browser.

If you are learning HTML, understanding comments is very important. They help you organize code, explain sections, and temporarily disable elements.

In this beginner-friendly guide, you will learn everything about the HTML comment tag step by step.

What is the HTML Comment Tag?

he HTML comment tag is used to insert notes or explanations inside HTML code.

These comments:

Are not visible on the webpage
Help developers understand the code
Improve readability
Make teamwork easier

In simple words, comments are messages for developers, not for users.

HTML Comment Tag Syntax

The syntax of the HTML comment tag is very simple:

<!-- This is a comment -->

Important Points:

It starts with <!--
It ends with -->
Everything inside is ignored by the browser

Basic Example of HTML Comment

Here is a simple example:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>

    <!-- This is a heading -->
    <h1>Welcome to My Website</h1>

</body>
</html>

The text “This is a heading” will NOT appear on the webpage.

Step-by-Step Guide: How to Use HTML Comment Tag

Let’s understand how to use it properly.

Step 1: Open Your HTML File

Create or open your HTML file in a code editor like:

Notepad
VS Code
Sublime Text

Step 2: Write the Comment Syntax

Add the comment syntax:

<!-- Your comment here -->

Step 3: Add Description Inside

Example:

<!-- Navigation Bar Starts Here -->

Step 4: Save and Refresh

Save your file and refresh the browser.

You will NOT see the comment displayed on the page.

Multi-Line Comments in HTML

HTML does not have a separate multi-line comment syntax. But you can write long comments like this:

<!--
This is a multi-line comment.
You can write explanations
across multiple lines.
-->

Everything inside the comment block will remain hidden.

Commenting Out Code in HTML

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

The paragraph will not appear on the webpage.

This is very useful while testing or debugging.

Real-World Use Cases of HTML Comments

1. Explaining Code Sections

<header>
<h1>My Website</h1>
</header>

2. Dividing Large HTML Files

<!– Footer Section Starts –>
<!– ===================== –>

3. Temporary Testing

4. Developer Notes

Comments vs Visible Text (Comparison Table)

Feature	HTML Comment	Visible Text
Visible on webpage	❌ No	✅ Yes
Used for users	❌ No	✅ Yes
Used for developers	✅ Yes	❌ No
Affects layout	❌ No	✅ Yes
Helps debugging	✅ Yes	❌ No

This table clearly shows that HTML comments are only for developers.

Common Mistakes in HTML Comments

Beginners often make small mistakes. Let’s look at them.

Missing Closing Tag

Wrong:

<!-- This is a comment

Correct:

<!-- This is a comment –>

Using Nested Comments

Wrong:

<!-- Outer comment

<!-- Inner comment-->
-->

HTML does NOT support nested comments.

Using Double Hyphens Inside

Avoid this:

Double hyphens inside comments can cause issues.

Best Practices

Follow these best practices:

Keep Comments Short and Clear

Do not write very long explanations.

Use Comments for Sections

Divide large files using comments.

Avoid Over-Commenting

Do not comment every single line.

Remove Unnecessary Comments

Clean up before publishing.

Do Not Put Sensitive Information

Comments are visible in page source (View Source option).

Anyone can see them by right-clicking → View Page Source.

Advanced Example: Structured HTML with Comments

<!DOCTYPE html>
<html>
<head>
    <title>Sample Page</title>
</head>
<body>

    <!-- Header Section -->
    <header>
        <h1>Website Title</h1>
    </header>

    <!-- Main Content -->
    <main>
        <p>This is the main content area.</p>
    </main>

    <!-- Footer Section -->
    <footer>
        <p>© 2026 My Website</p>
    </footer>

</body>
</html>

FAQs About HTML Comment Tag

Are HTML comments visible in the browser?

No, they are not visible on the webpage. However, they can be seen in the page source.