HTML Comment Tag – A Complete Guide for Beginners

Introduction

When building websites, writing code is only part of the job. As projects grow, keeping your code organized becomes just as important as making it work.

Imagine returning to a webpage you created six months ago. Without notes or explanations, it can be difficult to remember why certain code exists. That’s where HTML comments become useful.

The HTML comment tag allows developers to leave notes inside their code. These notes are visible only in the source code and are not displayed on the webpage.

In this guide, you’ll learn everything about the HTML comment tag, including syntax, examples, uses, best practices, SEO considerations, and common mistakes.

Learn HTML basics here:
https://w3htmlschool.com/html/

Learn HTML elements here:
https://w3htmlschool.com/html-elements-a-complete-guide/

What Is the HTML Comment Tag?

What is an HTML comment?

An HTML comment is a note added to HTML code that is ignored by browsers and not displayed on the webpage.

Why are HTML comments used?

HTML comments are used to explain code, organize sections, leave notes, and temporarily disable code during development.

Are HTML comments visible to users?

No. HTML comments are hidden from webpage visitors but can be viewed in the page source.

What is the syntax of an HTML comment?

HTML comments start with <!– and end with –>.

HTML comments help developers document their code and make projects easier to understand and maintain.

Basic Syntax of HTML Comments

The syntax of an HTML comment is simple.

<!-- 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>