← Back to All Tags

<!--...-->

Defines a comment

Definition and Usage

The comment tag is used to insert comments in the HTML code. Comments are not displayed in the browser.

You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code.

Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors.

Note: Comments are not displayed by the browser, but they can help document your HTML source code. Comments can also be used to hide content temporarily.
Warning: Comments are visible in the page source. Never put sensitive information (like passwords or API keys) in comments!

Browser Support

HTML comments are supported in all browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Syntax

Syntax

<!-- This is a comment -->

The comment starts with <!-- and ends with -->. Everything between these markers is ignored by the browser.

Examples

Single Line Comment

A simple one-line comment:

Example

<!-- This is a single line comment -->
<p>This paragraph is visible.</p>

Multi-Line Comment

Comments can span multiple lines:

Example

<!--
This is a multi-line comment.
It can span across multiple lines.
Very useful for longer explanations.
-->
<p>This paragraph is visible.</p>

Commenting Out Code

Use comments to temporarily disable HTML code for testing:

Example

<h1>Welcome to My Website</h1>

<!-- Temporarily hide this section
<section>
    <h2>Under Construction</h2>
    <p>This section is not ready yet.</p>
</section>
-->

<p>This content is visible.</p>

Code Documentation

Use comments to document sections of your HTML:

Example

<!-- Header Section -->
<header>
    <h1>My Website</h1>
    <nav>
        <!-- Main Navigation Menu -->
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

<!-- Main Content Area -->
<main>
    <p>Page content goes here.</p>
</main>

TODO Comments

Use comments to mark tasks that need to be completed:

Example

<!-- TODO: Add social media links here -->
<footer>
    <p>© 2024 My Website</p>
    <!-- FIXME: Update copyright year automatically -->
</footer>

Conditional Comments (Legacy IE)

Conditional comments were used to target specific versions of Internet Explorer (now deprecated):

Example

<!--[if IE 9]>
    <p>You are using Internet Explorer 9.</p>
<![endif]-->

<!-- Note: Conditional comments only worked in IE and are now obsolete -->

Best Practices

  • Keep comments concise and relevant - Only add comments that provide value
  • Update comments when code changes - Outdated comments are worse than no comments
  • Use consistent commenting style - Maintain consistency across your project
  • Don't state the obvious - Comment the "why", not the "what"
  • Remove comments before production - Consider removing unnecessary comments to reduce file size
  • Never include sensitive data - Comments are visible in page source

Common Mistakes

Nested Comments Don't Work

You cannot nest HTML comments inside other comments. This will cause unexpected behavior:

Incorrect Example

<!-- This is a comment
    <!-- This nested comment will break things -->
End of comment -->

Try it Yourself

Interactive Example

The HTML below contains comments. View the page source (right-click → View Page Source) to see the comments:

Visible content

Comments above and below this text are hidden in the browser but visible in the source code.

Related Topics