HTML Comments
Learn HTML comment syntax with examples: single-line and multi-line comments, valid vs invalid rules, and commenting out code for debugging.
An HTML comment is a note in your markup that the browser ignores: it is not rendered on the page and has no effect on layout. Comments exist purely for the people reading and maintaining the source code. They help you explain why a piece of markup exists, leave reminders for later, and temporarily disable code without deleting it.
This page covers the comment syntax, single-line and multi-line comments, the rules that make a comment valid (and the mistakes that break it), how to comment out code while debugging, and the legacy Internet Explorer conditional comments you may still encounter in old projects.
Syntax
A comment opens with <!-- and closes with -->. Everything between those markers is ignored by the browser:
<!-- This is an HTML comment -->You can place a comment on its own line, or after some markup on the same line:
<p>Total price</p>
<!-- TODO: pull this value from the cart, not hard-coded -->
<p>$42.00</p> <!-- includes tax -->The closing --> is required. If you forget it, the browser keeps treating everything that follows as part of the comment until it finds the next --> (or the end of the document), which silently hides chunks of your page — a common and confusing bug.
Why use comments
- Explain intent. Code shows what happens; a comment can record why. "Why is this
<div>empty?" is answered by a one-line note. - Collaboration. On a shared codebase, comments tell teammates how a section is meant to work.
- TODO / FIXME notes. Mark unfinished work or known issues so they're easy to find later (
<!-- TODO: add alt text -->). - Debugging. Temporarily hide markup to isolate a problem without losing the original code.
Comments are part of the page source and are visible to anyone who opens View Source or DevTools. Never put passwords, API keys, private notes, or other secrets in an HTML comment — "hidden" only means hidden from the rendered page, not from the user.
Single-line and multi-line comments
The same <!-- --> syntax works for one line or many. A multi-line comment simply spans several lines between the opening and closing markers:
<!-- This is a single-line comment -->
<!--
This is a multi-line comment.
Everything here is ignored by the browser,
no matter how many lines it spans.
-->
<p>This paragraph is visible.</p>HTML has no separate block-comment syntax — unlike CSS, which uses /* ... */, or JavaScript, which uses // and /* ... */. In HTML it is always <!-- -->.
Commenting out code for debugging
Wrapping markup in a comment is a fast way to disable it without deleting it. This is invaluable when you're hunting for which element is causing a problem:
<h1>The main heading</h1>
<!-- Temporarily disabled while debugging the layout
<aside>
<p>This sidebar is hidden for now.</p>
</aside>
-->
<a href="https://www.w3docs.com">Homepage</a>The <aside> above is not rendered and the browser does not even build it in the DOM. When you're done, remove the <!-- and --> to bring the code back.
Valid vs invalid comments
A comment has a few rules. Break them and the browser may treat your comment as text, or swallow markup you wanted to keep.
You cannot nest comments. The first --> closes the comment, so the second --> becomes stray text on the page:
<!-- outer comment <!-- inner comment --> still inside? -->Here the comment ends at the first -->. The leftover still inside? --> is rendered as visible text — almost never what you wanted.
Avoid -- inside a comment. Per the HTML spec, the text of a comment should not contain -- except as part of the closing -->. It also must not start with > or ->. These are valid:
<!-- A perfectly valid comment -->
<!-- Visit the section "Pricing" below -->And these are problematic:
<!-- Don't use a -- double dash inside --> <!-- the "--" can confuse parsers -->
<!--> Starts with > — invalid -->
<!-- Missing the closing marker <-- the rest of the page may vanishThe safest habit: open with <!--, write your note using single dashes or words, and always close with -->.
Try it: HTML comments in a full document
<!DOCTYPE html>
<html>
<head>
<title>The title of the document.</title>
</head>
<body>
<h1>The main heading</h1>
<!-- <p>We want to hide this paragraph temporarily.</p> -->
<a href="https://www.w3docs.com">Homepage</a>
<!-- TODO: this link will point to the homepage -->
</body>
</html>The browser renders only the heading and the link. The two commented lines produce nothing on screen, as the live preview below shows.
Conditional comments (legacy Internet Explorer)
Old versions of Internet Explorer (IE 5 to IE 9) supported a special conditional comment syntax. To every other browser it looked like an ordinary comment and was ignored, but IE would read and execute the markup inside when the condition matched:
<!--[if IE]>
<link rel="stylesheet" href="ie-only.css">
<![endif]-->
<!--[if lt IE 9]>
<p>You are using an old version of Internet Explorer.</p>
<![endif]-->This was once a standard way to ship CSS or scripts only to specific IE versions. Conditional comments are obsolete. Internet Explorer 10 dropped support for them, and modern browsers never supported them at all, so you should not use this technique in new code. It's covered here only so you recognise it in legacy projects.
Where comments can and cannot go
HTML comments work almost anywhere in the document, but not inside the <title> element. They also have no effect inside the <style> and <script> blocks, because those use CSS and JavaScript comment syntax respectively — an <!-- --> placed there is treated as code, not a comment.
All modern browsers support HTML comments and ignore their content, so the syntax is safe to use everywhere your markup needs explaining.