HTML  (Comment) Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The HTML comment tag is a special type of markup used to insert notes or annotations within your HTML code. Unlike regular HTML elements, the content inside a comment is not displayed in the browser, meaning users visiting your webpage will never see it in the rendered content. This makes comments an essential tool for developers to communicate ideas, provide explanations, or leave reminders directly in the code itself.

Comments serve as a form of internal documentation, allowing developers to annotate the structure, purpose, or behavior of particular sections of a webpage. For instance, you might use a comment to explain why a certain layout decision was made, to indicate dependencies on other scripts or styles, or to provide instructions for future edits. This helps maintain code clarity, especially in complex projects where multiple people may be working on the same files.

Another important aspect of comments is their utility in debugging or testing. By commenting out a portion of HTML code, you can temporarily disable elements without deleting them. This allows you to experiment with changes or troubleshoot issues while keeping the original code intact for reference. Comments can also be used to mark sections of code as placeholders or "TODOs," reminding you or other developers to return and make improvements or updates later.

Although comments are ignored by the browser and do not affect the page’s layout or functionality, they are still visible in the page’s source code. This means that while they are helpful for developers, they should never be used to store sensitive information, as anyone viewing the source can see them. Properly used comments can greatly enhance the maintainability and readability of your code, making them a fundamental practice in professional web development.

Key Points:

Syntax: Comments begin with . Anything written between these delimiters is ignored by the browser.

<!-- This is a comment -->

Purpose: Comments are primarily used for:

Explanations: Clarifying sections of code for yourself or other developers.

<!-- Main navigation starts here -->
<nav>My Navigation</nav>

Debugging: Temporarily disabling code without deleting it.

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

Reminders or TODOs: Noting changes or enhancements that need to be made.

<!-- TODO: Replace placeholder image with actual product image -->

Behavior: Comments are ignored during page rendering, meaning they do not affect layout, styling, or functionality. However, they are visible in the page source, so they are not a secure way to hide sensitive information.
Nesting Restriction: HTML comments cannot be nested. Adding <!-- inside another comment can break the comment and cause unexpected rendering issues.
Best Practices:
- Keep comments concise but informative.
- Avoid leaving large blocks of commented-out code in production as it increases page size unnecessarily.
- Use comments to improve code readability and maintainability.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Comment Example</title>
</head>
<body>
    <!-- Header section -->
    <header>
        <h1>Welcome to My Website</h1>
    </header>

    <!-- Main content starts here -->
    <main>
        <p>This is the main content of the page.</p>
        <!-- This paragraph might be removed later -->
        <p>Temporary paragraph.</p>
    </main>

    <!-- Footer section -->
    <footer>
        <p>© 2025 My Website</p>
    </footer>
</body>
</html>

Properties

Permitted Parents: -
Content: -
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<!--This is a comment, it will not be displayed in the browser--><p>But this will</p>

Result

Editor

Attributes

None

Global Attributes

None

Event Attributes

None

Browser Support

The following information will show you the current browser support for the HTML  (Comment) tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.