Runnable HTML Docs: Comments

Q: How do you write a comment in HTML?

Start it with : . Everything between the two markers is ignored by the browser, including tags, so the same syntax comments out code.

Q: Can HTML comments be nested?

No. The first --> ends the comment, so in c --> the text c --> is displayed on the page. To comment out a block that contains a comment, remove or change the inner comment first.

Q: Do HTML comments work inside CSS or JavaScript?

No. Inside a element use / ... /, and inside a use // or / ... /. An HTML comment in a style block does not hide the CSS rules inside it.

How to write a comment in HTML

An HTML comment starts with . The browser ignores everything between the two markers, so the text never appears on the page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments</title>
</head>
<body>
  <!-- This comment is not displayed -->
  <h1>Visible heading</h1>

  <!--
    A comment can span several lines.
    Use it for notes to yourself or your team.
  -->
  <p>Visible paragraph.</p>
</body>
</html>

Only the heading and the paragraph show up. There is one comment syntax in HTML, and it works for a single line or many lines.

The shortcut in VS Code and most editors: select some lines and press Ctrl + / (Cmd + / on a Mac). The editor adds the markers for you, and the same keys remove them.

Commenting out code

Because the browser ignores tags inside a comment, wrapping markup in  hides it without deleting it. This is the quickest way to test a page without an element:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comment out</title>
  <style>
    .banner { background: #fef3c7; padding: 8px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <!-- <div class="banner">Sale ends Friday</div> -->
  <h1>Shop</h1>
  <!--
  <ul>
    <li>Old menu item</li>
    <li>Another old item</li>
  </ul>
  -->
  <p>Remove the comment markers around the banner to bring it back.</p>
</body>
</html>

Delete  on the banner line and it reappears. Commented out code is still downloaded with the page, so once you are sure you do not need it, delete it.

Comments cannot be nested

The first --> always closes the comment. If the code you comment out already contains a comment, the outer comment ends early and the rest spills onto the page. This example passes nested comments to the browser's parser and shows what ends up visible:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested comments</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const html = '<!-- outer <!-- inner --> still meant to be hidden -->';
    const box = document.createElement('div');
    box.innerHTML = html;
    document.getElementById('out').textContent =
      'Source:  ' + html + '\nVisible: ' + box.textContent;
  </script>
</body>
</html>

still meant to be hidden --> is displayed as text. Before commenting out a large block, remove the comments inside it (or change their --> so it no longer matches).

A few more rules: a comment cannot start with , so keep both out of the comment text.

Comments are public

Comments are part of the HTML the server sends, so every visitor can read them with View Source or the developer tools. A script can list them too:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments are public</title>
  <style>
    li { font-family: monospace; }
  </style>
</head>
<body>
  <!-- TODO: fix the checkout button -->
  <p>This page has comments. Here they are:</p>
  <!-- admin password is hunter2 (never do this) -->
  <ul id="list"></ul>
  <script>
    const walker = document.createTreeWalker(document, NodeFilter.SHOW_COMMENT);
    while (walker.nextNode()) {
      const li = document.createElement('li');
      li.textContent = walker.currentNode.data.trim();
      document.getElementById('list').appendChild(li);
    }
  </script>
</body>
</html>

Keep comments to notes about the code. Anything private (passwords, API keys, internal URLs, customer data) must never be in HTML, commented or not. Build tools and minifiers usually strip comments from production HTML, which also saves a few bytes.

Comments in CSS and JavaScript

HTML comments only work in HTML. Inside <style> and <script> you use the comment syntax of that language:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS and JS comments</title>
  <style>
    /* A CSS comment: this rule is disabled */
    /* p { color: #dc2626; } */

    <!-- h1 { color: #2563eb; } -->
  </style>
</head>
<body>
  <h1>This heading is blue</h1>
  <p id="msg">Paragraph</p>
  <script>
    // A JavaScript comment
    /* Block comments work in JavaScript too */
    document.getElementById('msg').textContent = 'Set by the script';
  </script>
</body>
</html>

The heading turns blue: CSS ignores the  markers themselves and still applies the rule between them. Only /* ... */ disables CSS. The CSS comments page covers that syntax.

Conditional comments

Old code sometimes contains . These were instructions for Internet Explorer 9 and earlier. Every current browser treats them as ordinary comments, so the content inside is ignored and the whole block can be deleted.

Common mistakes

Nesting comments. The inner --> ends the outer comment. Remove inner comments before commenting out a block.
Putting secrets in comments. Comments are sent to every visitor.
A missing -->. Everything after <!-- up to the end of the file disappears, which looks like half the page vanished.
Using  in CSS. It does not disable the rules. Use /* */.
Using // in HTML. // note is displayed as text. HTML only understands .

Frequently Asked Questions

How do you write a comment in HTML?

Start it with : . Everything between the two markers is ignored by the browser, including tags, so the same syntax comments out code.

How do you make a multi-line comment in HTML?

HTML has only one comment syntax, and it can span any number of lines. Put  after the last one.

What is the shortcut to comment in HTML?

In VS Code and most code editors, select the lines and press Ctrl + / (Windows and Linux) or Cmd + / (Mac). The editor wraps the selection in , and the same keys remove them.

Can HTML comments be nested?

No. The first --> ends the comment, so in  c --> the text c --> is displayed on the page. To comment out a block that contains a comment, remove or change the inner comment first.

Can users see HTML comments?

They are not displayed, but they are sent to the browser with the page. Anyone can read them with View Source or the developer tools, so never put passwords, keys or private notes in them.

Do HTML comments work inside CSS or JavaScript?

No. Inside a <style> element use /* ... */, and inside a <script> use // or /* ... */. An HTML comment in a style block does not hide the CSS rules inside it.

Related concepts