HTML Comments Tag | Docs With Examples

HTML comments are non-visible notes that you can add to an HTML document to explain code, provide instructions, or temporarily disable parts of a webpage. They help developers understand and maintain HTML code more efficiently without affecting how the webpage is displayed in browsers.

Basic Syntax of an HTML Comment

The HTML comment tag starts with . Anything inside these markers is ignored by the browser and will not be displayed on the webpage.

<!-- This is a comment -->

Example: Adding a Comment in HTML

<!DOCTYPE html>
<html>
<head>
    <title>HTML Comments Example</title>
</head>
<body>
    <!-- This is a comment explaining the heading below -->
    <h1>Welcome to My Website</h1>
</body>
</html>

Why Use HTML Comments?

Code Documentation – Helps developers, especially beginners, understand sections of code when revisiting it later.
Disabling Code Temporarily – Useful for testing or debugging without deleting lines of code.
Adding Notes for Other Developers – Helps teams collaborate by providing explanations.

Using Comments to Disable Code

You can use comments to temporarily remove HTML elements from the webpage without deleting them. Open up an HTML editor to see for yourself.

<!-- <p>This paragraph is commented out and will not appear on the page.</p> -->

HTML Comments for Debugging

Comments can help identify issues in large HTML projects by marking sections of code clearly.

<!-- Start of Navigation Menu -->
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
    </ul>
</nav>
<!-- End of Navigation Menu -->

Types of HTML Comments

Although HTML does not officially have different types of comments, developers typically use them in different ways:

Single-line comments - Placed on one line to describe a specific element or action.

<!-- This is a single-line comment -->

Multi-line comments - Used to document longer sections of code.

<!--
This is a multi-line comment.
It spans multiple lines in the HTML document.
-->

Nested Comments: What You Should Know

HTML does not support nested comments. Adding <!-- inside another comment will break the comment.

<!-- This is a comment <!-- Nested comment --> Still part of the comment -->

To avoid issues, always close comments properly before starting another.

Using Comments in CSS and JavaScript

HTML comments do not work in CSS or JavaScript. Instead, use:

CSS Comments

/* This is a CSS comment */

JavaScript Comments

// This is a single-line comment

/* This is a multi-line comment */

Common Questions About HTML Comments

How do you write comments in HTML?

To write a comment in HTML, use the HTML comment syntax, which starts with .

<!-- This is an HTML comment -->

Anything inside the comment tags will not be rendered on the webpage but will be visible in the HTML source code.

What is /* in HTML?

The /* syntax is not valid in HTML. Instead, it is used for writing comments in CSS and JavaScript.

CSS Example:

/* This is a CSS comment */

JavaScript Example:

/* This is a multi-line JavaScript comment */

For valid comments in HTML, always use .

How do you comment multiple lines in HTML?

To comment multiple lines in HTML, enclose them within .

<!--
This is a multi-line comment.
It spans multiple lines in the HTML document.
-->

All lines inside the comment block will be ignored by the browser.

What are HTML comments used for?

HTML comments are used to add notes to code, temporarily disable elements, and assist in debugging or organizing complex documents.

Do HTML comments affect page load time?

No, comments are ignored by browsers and do not affect page performance.

Can HTML comments be viewed by users?

Yes, users can see comments by viewing the HTML source code of the page.

Can you use comments inside an HTML tag?

No, comments must be placed outside HTML tags.

<p <!-- This is incorrect -->>Text</p>

The correct way:

<!-- This is a comment -->
<p>Text</p>

Key Takeaways

HTML comments start with the start tag .
They do not appear on the webpage but are visible in the HTML source code.
Used for documentation, debugging, and temporarily disabling elements.
HTML comments do not support nesting.
CSS and JavaScript use different comment syntaxes.
Understanding the types of HTML comments helps web developers write cleaner, well-structured HTML code.

Wrapping Up

HTML comments are a valuable tool for developers to write clean, maintainable, and well-documented code. Whether used for debugging, organizing code, or providing notes for collaborators, understanding how to use comments effectively enhances code readability and development workflow.