Q&A

How to add comments in HTML

By AlgoInsight Team2026-06-07frontendweb-developmenthtml

Overview

Comments let you leave human-readable notes in your markup that the browser skips when rendering. They're a basic but important tool for documenting structure, explaining intent, marking sections, and disabling code during development. The one rule to remember: HTML comments are not secret - they ship to the client and are readable by anyone who views source.

graph LR
    A["<!-- comment -->"] --> B[Browser ignores it: not rendered]
    A --> C[Still present in page source: viewable]
    C --> D[⚠ Never put secrets in comments]
    style A fill:#1e1b4b,color:#fff

Basic Syntax

<!-- This is a single-line comment -->

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

<!--
  This is a
  multi-line comment.
  The browser ignores all of it.
-->

The opening <!-- and closing --> delimit the comment; everything in between is ignored during rendering.

Common Uses

Documenting / labeling sections

<!-- Main navigation -->
<nav> ... </nav>

<!-- Footer: contact info and links -->
<footer> ... </footer>

Temporarily disabling markup (commenting out)

<!-- <button>Old button, hidden for now</button> -->

The button won't render while commented. This is handy during debugging or staging changes.

Notes / TODOs for developers

<!-- TODO: replace placeholder image before launch -->
<img src="placeholder.png" alt="Product">

Important Rules and Gotchas

• No nesting. You can't nest comments; the first --> closes the comment:

  <!-- outer <!-- inner --> still text -->   <!-- breaks: closes at first --> -->
  

• No double hyphens inside. Avoid -- within comment text in strict parsers; <!-- don't use -- here --> can cause issues.
• Comments are visible in source. View Source / DevTools reveals them - never store passwords, API keys, internal notes, or anything sensitive.
• They add to file size. Excessive comments increase bytes sent; production build tools often strip them (minification).

Conditional Comments (legacy)

Old versions of Internet Explorer supported conditional comments to target specific IE versions:

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

These are obsolete (IE 10+ and all modern browsers ignore them) but you may still encounter them in legacy code.

Comments vs Other Languages in a Page

• HTML: <!-- ... -->
• CSS: /* ... */
• JavaScript: // single line or /* block */

Don't use the wrong syntax in the wrong context - an HTML comment inside a <script> block won't behave as a JS comment.

Why This Matters in Interviews

Though basic, this question checks fundamentals and good practices: the exact <!-- --> syntax, that comments are ignored by the browser but visible in source (the security caveat is the high-value point), the no-nesting rule, and awareness that production builds often strip comments. Knowing the distinct comment syntaxes for HTML/CSS/JS within one page shows attention to detail.

Common Pitfalls

• Putting sensitive data in comments, assuming they're hidden (they're not).
• Trying to nest comments - the first --> ends the comment.
• Using // or /* */ (JS/CSS syntax) for HTML comments.
• Leaving large commented-out blocks in production, bloating the page.

References

• MDN HTML comments: https://developer.mozilla.org/en-US/docs/Web/HTML/Comments
• HTML Living Standard (comments): https://html.spec.whatwg.org/multipage/syntax.html#comments

More answers