Comments (<!-- -->)
How to write comments in HTML. The only syntax is <!-- -->, which covers both single-line and multi-line comments. Comments are not rendered by the browser and do not affect page behavior. They are used to record the intent of code or to temporarily disable markup.
Syntax
<!-- Single-line comment. --> <!-- Multi-line comment. Everything between <!-- and --> becomes a comment. -->
Comment Types
| Type | Syntax | Description |
|---|---|---|
| Single-line comment | <!-- text --> | A comment that fits on one line. Used to mark section boundaries or add short notes. |
| Multi-line comment | <!-- text --> | Used for explanations that span multiple lines or to comment out a large HTML block at once. |
Comment Restrictions
Comments cannot be nested
HTML comments cannot be nested. Even if you write another <!-- inside a comment, the first --> terminates the outer comment.
<!-- Outer comment start <!-- Inner comment --> <!-- The outer comment also ends here --> This text is now outside the comment. -->
When commenting out a large HTML block, if there are existing comments inside it, the comment will end at an unexpected location. Remove any inner comments before commenting out the block, or use a template conditional to hide the section instead.
-- (double hyphen) cannot appear inside a comment
According to the HTML specification, two consecutive hyphens (--) are not allowed inside a comment body. They are interpreted as the end marker -->. Use a single hyphen or insert a space between hyphens.
<!-- NG: contains -- inside the comment --> <!-- OK: a single hyphen - is fine -->
IE Conditional Comments (Historical Background)
Internet Explorer 5 through 9 supported a proprietary extension called Conditional Comments (<!--[if IE]>). This syntax was used to detect the IE version and load IE-specific stylesheets or scripts.
<!--[if IE]> <p>This text is shown only in IE.</p> <![endif]--> <!--[if lt IE 9]> <link rel="stylesheet" href="ie_compat.css?lang=en"> <![endif]--> <!--[if gte IE 8]> <p>Shown in IE 8 and later.</p> <![endif]-->
| Condition | Meaning |
|---|---|
[if IE] | Any version of IE |
[if IE 8] | IE 8 only |
[if lt IE 9] | Less than IE 9 (IE 8 and earlier) |
[if lte IE 9] | IE 9 and earlier |
[if gt IE 8] | Greater than IE 8 (IE 9 and later) |
[if gte IE 8] | IE 8 and later |
Browsers other than IE treated this syntax as a regular comment and ignored the content inside. IE 10 and later dropped support for conditional comments, and they do not work in IE 11 either. Since IE itself is now end-of-life, there is no need to use this syntax in new code.
When to Write Comments and When Not To
| Decision | Situation | Reason |
|---|---|---|
| Write a comment | Marking the boundary between large sections | Adding comments at the borders between header, main content, and footer makes it easier to find your location in a long HTML file. |
| Write a comment | When a closing tag's matching open tag is unclear | In deeply nested markup, it is hard to tell which tag is being closed. A comment like <!-- /wrapper --> makes the correspondence explicit. |
| Write a comment | Temporarily commented-out code | When hiding an element temporarily for testing or debugging, leaving a note about the intention to restore it reduces the risk of forgetting later. |
| Write a comment | Explaining template variables or logic | In sections where server-side code (such as PHP) is mixed in, the intent may not be clear from HTML alone, so a note can help. |
| No comment needed | When the tag name makes the purpose obvious | There is no need to write <!-- navigation --> when a <nav> tag already communicates that. Writing semantic HTML reduces the need for such comments. |
| No comment needed | Change history or deleted code | Because version control (git) is available, there is no need to keep old code or change dates in comments. |
Sample Code
Using section markers and closing-tag comments.
comment_section.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Comment Sample</title>
</head>
<body>
<!-- Header -->
<header>
<nav>
<ul>
<li><a href="/?lang=en">Home</a></li>
<li><a href="/about?lang=en">About</a></li>
</ul>
</nav>
</header>
<!-- /Header -->
<!-- Main content -->
<main>
<div class="container">
<div class="wrapper">
<section>
<h1>Sample Page</h1>
<p>Content goes here.</p>
</section>
</div><!-- /wrapper -->
</div><!-- /container -->
</main>
<!-- /Main content -->
<!-- Footer -->
<footer>
<p>© 2025 example.com</p>
</footer>
<!-- /Footer -->
</body>
</html>
Temporary comment-out and debug comments.
comment_debug.html
<!-- TODO: replace with final hero image once dimensions are confirmed --> <!-- <div class="hero-banner"> <img src="/img/hero.jpg" alt="Hero visual"> </div> --> <!-- Temporary: text-only placeholder --> <div class="hero-placeholder"> <p>Area reserved for the hero visual.</p> </div>
Overview
HTML has a single comment syntax: <!-- -->. The same notation is used for both single-line and multi-line comments. Comments are not rendered by the browser, and they can appear anywhere in the HTML. However, because anyone can read them by viewing the page source, you should avoid placing sensitive information such as passwords or internal notes inside HTML comments.
Comments cannot be nested. The comment ends as soon as --> is encountered. When commenting out a large block, any existing comments inside it will cause the outer comment to end at an unexpected location.
IE conditional comments (<!--[if IE]>) were a proprietary extension used in IE 5 through 9. Support was dropped in IE 10, and IE itself is now end-of-life. There is no reason to use this syntax in new code.
Common Mistakes
Including -- inside a comment breaks it
The HTML specification does not allow -- (two consecutive hyphens) inside the comment body. Some browsers may be lenient, but it is invalid according to the spec.
<!-- Date: 2025-04-01 -- Temporary fix -->
Fixed:
<!-- Date: 2025-04-01 / Temporary fix -->
An existing comment inside the block causes the outer comment to end early
Because comments cannot be nested, if the block you want to comment out contains an existing comment, the first --> will terminate the outer comment.
<!-- <div class="old-section"> <!-- This block is from the old design --> <!-- The comment ends here --> <p>Old content</p> </div> -->
Remove the inner comment before commenting out the block, or use a template conditional to hide the section.
If you find any errors or copyright issues, please contact us.
シェアする