HTML Comments: How to Add Comments in HTML

What Are HTML Comments?

A comment is a section of your HTML that the browser treats as if it were not there. It is used to leave notes inside your code — explanations, reminders, labels, or instructions for other developers.

When a browser parses an HTML file, it looks for tags, attributes, and text content. When it encounters a comment, it skips over the entire block without rendering anything.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Comments Demo</title>
</head>
<body>
    <!-- This comment is invisible to the visitor -->
    <h1>Welcome</h1>
    <p>Only the heading and this paragraph are displayed.</p>
</body>
</html>

The visitor sees the heading and paragraph only. The comment is not rendered, not announced by screen readers, and not shown anywhere on the page.

HTML Comment Syntax

Every HTML comment follows the same pattern: an opening marker, the comment text, and a closing marker.

The opening marker is <!-- (less-than, exclamation, two hyphens). The closing marker is --> (two hyphens, greater-than). Everything in between is the comment.

<!-- This is a simple HTML comment -->

Rules of the syntax

• Starts with <!-- and ends with -->.
• Can be placed anywhere between elements or inside element content.
• Cannot appear inside a tag (between the angle brackets).
• Cannot be nested — a comment cannot contain another comment.
• Content is not rendered, not parsed as HTML, and not announced to screen readers.

Single-Line Comments

The simplest comment is a single line. It fits entirely between the opening and closing markers.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Single-Line Comments</title>
</head>
<body>
    <!-- Main navigation -->
    <nav>
        <a href="https://inarlearn.com/">Home</a>
        <a href="https://inarlearn.com/inar-guides/web-development-guide/html-guide/">HTML</a>
    </nav>

    <!-- Hero section -->
    <section>
        <h1>Welcome to Inar Learn</h1>
        <p>Learn web development from the ground up.</p>
    </section>

    <!-- Footer -->
    <footer>
        <p>&copy; 2025 Inar Learn</p>
    </footer>
</body>
</html>

Each comment acts as a small label for the block of code that follows it. A reader can scan the file and immediately understand the structure.

Multi-Line Comments

There is no special syntax for multi-line comments. You use the same markers, but the comment text simply spans several lines.

<!--
    This is a multi-line comment.
    It can describe a complex section of code,
    list requirements, or explain a design decision.
-->

Everything between the opening and closing markers — including every newline — is treated as one comment.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multi-Line Comments</title>
</head>
<body>
    <!--
        Product card
        -----------
        Structure:
          - Image
          - Title
          - Price
          - Add to cart button
        Notes:
          - Image should use lazy loading
          - Button is disabled until size is selected
    -->
    <article class="card">
        <img src="product.jpg" alt="Product photo">
        <h2>Inar Learn Course</h2>
        <p>$29.99</p>
        <button>Add to cart</button>
    </article>
</body>
</html>

Multi-line comments are useful when you need to explain the purpose of a section rather than just label it. They are also common at the top of files as a header block.

Commenting Out Code

One of the most practical uses of comments is temporarily disabling a block of code. Wrap the block in comment markers and the browser will ignore it completely.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Commenting Out Code</title>
</head>
<body>
    <h1>Visible heading</h1>

    <!--
    <p>This paragraph is disabled during testing.</p>
    <button>This button is also disabled.</button>
    -->

    <p>This paragraph is visible.</p>
</body>
</html>

Only the heading and the second paragraph appear on the page. The commented block is still in the source file but does not render.

When to comment out code

• Testing whether a section is causing a layout bug.
• Temporarily disabling a feature while you fix something.
• Keeping an older version of a block around for reference (short-term only).
• Leaving a variant for a teammate to review.

What the Browser Does with Comments

The browser's HTML parser treats comments as if they do not exist. They are read, then thrown away. They do not create DOM nodes, do not affect rendering, and are not accessible to CSS or JavaScript as content.

Where Comments Can and Cannot Go

Comments are flexible, but they cannot be placed just anywhere. Here is the rule.

Inside a tag: not allowed

Inside element content: allowed

<div class="card">
    <!-- Card header -->
    <h2>Title</h2>
    <!-- Card body -->
    <p>Body text.</p>
</div>

Why You Cannot Nest Comments

HTML comments cannot be nested. The moment the browser sees the first --> sequence, it treats the comment as closed — even if you intended it to be an inner comment.

In the incorrect version, the browser closes the comment at the first -->. Everything after that — including "Still outer" and the final --> — is treated as regular text. On the page you would see something like "Still outer -->" displayed as visible text.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Broken Nesting Demo</title>
</head>
<body>
    <h1>Nested comments do not work</h1>
    <!-- Outer comment starts
    <!-- Inner comment ends here -->
    and this text becomes visible!
    -->
</body>
</html>

The result is broken. You will see the leftover text and an orphaned --> appear on the page. This is one of the most confusing HTML bugs beginners encounter.

Comments in JavaScript and CSS

HTML pages frequently contain JavaScript and CSS — inside <script> and <style> tags. Those languages have their own comment syntaxes, and they do not mix with HTML comments.

Here is a page that contains all three comment styles in the correct places:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three Comment Styles</title>
    <style>
        /* CSS comment: styles the heading */
        h1 {
            color: #0891b2;
            font-family: system-ui, sans-serif;
        }
    </style>
</head>
<body>
    <!-- HTML comment: this heading is the page title -->
    <h1>Hello</h1>

    <script>
        // JavaScript comment: logs when the page loads
        console.log("Page loaded");
    </script>
</body>
</html>

Each language uses its own comment syntax, and each is ignored by its respective parser. Do not use <!-- --> inside a script tag or // inside HTML text — neither will do what you expect.

Conditional Comments (Legacy)

Older versions of Internet Explorer (IE 9 and below) supported a special kind of comment called a conditional comment. It looked like a comment but could tell IE to include or exclude content.

<!--[if IE]>
    <link rel="stylesheet" href="ie-only.css">
<![endif]-->

Modern browsers treated the whole thing as a comment and ignored it. IE would read the condition and include the content only if the condition matched.

These are obsolete. Modern Edge is based on Chromium and no longer supports conditional comments. They should not be used in new code.

HTML Comments vs. Server-Side Comments

HTML comments are sent to the visitor's browser, but comments in server-side languages (PHP, Python, Ruby, Node.js, etc.) are not. This distinction matters when you are deciding where to leave a note.

The rule of thumb: if you do not want visitors to see it, do not put it in an HTML comment. Use server-side comments, or leave the note out of the file entirely.

When to Use Comments

Comments are useful, but not everything deserves one. Here is a practical guide for deciding when a comment adds value.

Common HTML Comment Mistakes

Comments are simple, but a few mistakes come up again and again. Here are the ones to watch for.

1. Using the wrong comment syntax

2. Forgetting the closing marker

When a comment is left open, the browser hides everything after it until it finds a closing --> — often much later in the file. This can hide large portions of your page without any visible error.

3. Nesting comments

4. Putting a comment inside a tag

5. Using hyphens inside a comment incorrectly

A comment cannot contain a double hyphen (--) anywhere in its body. That sequence would be interpreted as the closing marker.

6. Leaving sensitive information

7. Commenting out code as a long-term strategy

Key Takeaways

• An HTML comment starts with <!-- and ends with -->.
• Comments are invisible on the page but still visible in page source — never put secrets in them.
• Comments can be single-line or multi-line using the same markers.
• Comments can be used to temporarily disable a block of code during development.
• Comments cannot be nested — the first closing marker ends the comment.
• Comments cannot appear inside a tag; they must go between elements or inside element content.
• JavaScript uses // and /* */; CSS uses /* */; HTML uses <!-- --> — the syntaxes do not mix.
• Server-side comments are not sent to the browser — use them for anything private.
• A good comment explains why, not what.

What to Learn Next

Now that you understand HTML comments, the next step is to strengthen your foundational HTML skills. Start with HTML Syntax Explained and HTML Elements vs Tags for a solid base.

For deeper coverage, explore HTML Elements and HTML Attributes. To understand where HTML fits in the bigger picture, see What Is HTML?, How Websites Work, and How Web Browsers Work.

Practice Challenge

Build a small HTML page that uses comments in several different ways. Your page should include:

• A header comment at the top of the file describing what the page is
• A single-line comment before each major section of the page
• A multi-line comment that explains a design decision in the page
• A block of HTML code that has been commented out during development, with a note explaining why
• Comments placed correctly between elements and inside element content

When your page renders, none of the comment text should appear on the screen. Open the page in a browser, right-click, and choose "View Page Source." You should see every comment exactly as you wrote it.

If you can do all of that, you have mastered HTML comments — and you have learned why they are visible to visitors even when the page does not display them.