Home / HTML / Comments

HTML Comments

What are HTML Comments?

HTML comments are notes or reminders in your HTML code that are not displayed in the browser. They are useful for documenting your code, explaining complex sections, or temporarily hiding code without deleting it. Comments are ignored by the browser when rendering the page.

Comment Syntax

HTML comments are written using the following syntax:

Example

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

Comments start with . Everything between these markers is treated as a comment and will not be displayed in the browser.

Single-Line Comments

Comments can be written on a single line:

Example

<!-- This is a single-line comment -->
<h1>My Heading</h1>
<!-- This comment explains the paragraph below -->
<p>This is a paragraph.</p>

Multi-Line Comments

Comments can span multiple lines:

Example

<!--
    This is a multi-line comment.
    It can span several lines.
    This is useful for longer explanations.
-->
<h1>My Heading</h1>

Commenting Out Code

Comments are often used to temporarily disable code without deleting it:

Example

<h1>Active Heading</h1>
<!--
<h1>This heading is commented out</h1>
<p>This paragraph is also commented out</p>
-->
<p>This paragraph is active</p>

Inline Comments

Comments can be placed inline with HTML code:

Example

<h1>My Heading</h1> <!-- This is the main heading -->
<p>First paragraph</p> <!-- Introduction paragraph -->
<p>Second paragraph</p> <!-- Main content -->

Commenting Out Attributes

You can comment out parts of HTML elements, but be careful - you cannot comment out part of an opening tag:

Example - Invalid (Don't Do This)

<!-- Invalid: You cannot comment out part of a tag -->
<h1 <!-- style="color: red;" -->>Heading</h1>

Example - Valid (Correct Way)

<!-- Valid: Comment out the entire element -->
<!-- <h1 style="color: red;">Heading</h1> -->
<h1>Heading</h1>

Documenting Code Sections

Comments are excellent for documenting sections of your HTML:

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Head section: Contains meta information and links -->
    <meta charset="UTF-8">
    <title>My Page</title>
</head>
<body>
    <!-- Header section -->
    <header>
        <h1>Website Title</h1>
    </header>

    <!-- Main content section -->
    <main>
        <p>Main content goes here.</p>
    </main>

    <!-- Footer section -->
    <footer>
        <p>Copyright 2025</p>
    </footer>
</body>
</html>

Conditional Comments (IE Only)

Conditional comments were used to target Internet Explorer versions, but they are deprecated in HTML5 since IE support has ended:

Example - Deprecated (Don't Use)

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

Best Practices

Document your code: Use comments to explain complex sections or non-obvious code
Keep comments up to date: Remove or update outdated comments
Don't over-comment: Don't comment obvious code like <h1>Heading</h1>
Use comments for debugging: Comment out code temporarily to test different versions
Write clear comments: Make your comments meaningful and easy to understand
Remove commented-out code: Before deploying, remove large blocks of commented-out code

Comments vs. Hidden Elements

Important: Comments are not the same as hiding elements with CSS. Comments completely remove content from the HTML, while CSS display: none or visibility: hidden hide elements but they still exist in the HTML.

Example: Comment (Not in HTML)

<!-- This element is completely removed from the HTML -->
<!-- <p>Hidden paragraph</p> -->

Example: CSS Hidden (Still in HTML)

<p style="display: none;">This paragraph is hidden but still in the HTML</p>

← HTML Quotation HTML CSS →