HTML Comment Tag – A Complete Guide for Beginners

Introduction: Why HTML Comments Are Important

When writing HTML, not everything you type is meant to be displayed on the webpage.
Sometimes you want to:

Add notes for yourself
Explain code for others
Temporarily disable part of the code
Improve readability and maintenance

For these purposes, HTML provides the comment tag.

HTML comments are invisible to users, but they are extremely useful for developers, students, and teams working together.

What Is the HTML Comment Tag?

An HTML comment is a piece of text that is ignored by the browser.

In simple words:
HTML comments are notes written inside the code that do not appear on the webpage.

<!-- This is a comment -->

Key Points

Starts with <!--
Ends with -->
Content inside is not displayed
Works anywhere in HTML

Example 1: Simple HTML Comment

<!-- This is a comment -->
<p>Hello World</p>

Output Explanation

Only “Hello World” is shown
The comment is hidden from users

Using Comments to Explain Code

Comments are often used to describe what a section of code does.

<!-- Main heading of the page -->
<h1>Welcome to My Website</h1>

<!-- Introduction paragraph -->
<p>This website teaches HTML.</p>

Improves readability
Helpful for beginners and teams

Using HTML Comments to Temporarily Disable Code

You can use comments to hide HTML elements without deleting them.

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

The paragraph will not appear on the page.

Commenting Out a Section of HTML

<!--
<div class="banner">
  <h2>Special Offer</h2>
  <p>Limited time only!</p>
</div>
-->

Useful for testing
Easy to restore later

HTML Comments Inside Elements

Comments can be placed almost anywhere in HTML.

<p>
  This is visible text
  <!-- This is a comment inside a paragraph -->
</p>

The comment does not affect the text display.

HTML Comments and Source Code

Although comments are not visible on the webpage, they are visible in page source.

Right-click → View Page Source
Comments can be seen by anyone viewing the HTML

⚠️ Never put sensitive information in comments.

HTML Comments vs Visible Content

Feature	HTML Comment	HTML Content
Visible on page	No	Yes
Read by browser	Ignored	Rendered
Useful for notes	Yes	No
Affects layout	No	Yes

HTML Comments and SEO

Search engines ignore comments
Comments do not improve SEO
Too many comments can increase page size slightly

Use comments for clarity, not for SEO keywords.

Common Beginner Mistakes

Forgetting to close the comment

Nesting comments (not allowed)

Putting passwords or secrets in comments
Overusing comments unnecessarily

Correct vs Incorrect Comment Syntax

Incorrect

Correct

Best Practices for HTML Comments

Use comments to explain complex code
Comment important sections
Keep comments short and clear
Remove unnecessary comments in production
Never store sensitive data in comments

Real-World Example

<!DOCTYPE html>
<html>
<head>
  <title>HTML Comments Example</title>
</head>
<body>

  <!-- Page Header -->
  <h1>HTML Comment Tag</h1>

  <!-- Main Content -->
  <p>This page explains HTML comments.</p>

  <!-- Footer Section -->
  <footer>
    <p>© 2026 HTML Learning</p>
  </footer>

</body>
</html>