Advertisement
🌐 Beginner

HTML Comments

HTML comments let you add notes to your code that the browser ignores completely. Comments are invaluable for explaining why something is structured a particular way, for temporarily disabling markup during debugging, and for marking section boundaries in long HTML files.

⏱️ 8 min read🎯 Beginner📅 Updated 2026

Comment Syntax

HTML
<!-- This is an HTML comment — the browser ignores everything here -->

<!-- Single line comment -->

<!--
  Multi-line comment.
  Everything inside is ignored by the browser.
  Useful for longer explanations.
-->

<p>This paragraph is visible.</p>
<!-- <p>This paragraph is commented out — not rendered.</p> -->
<p>This paragraph is also visible.</p>
⚠️
HTML comments are visible in page source

Anyone can view your HTML comments by pressing Ctrl+U (View Source) or using browser DevTools. Never put passwords, API keys, internal notes about bugs, or sensitive business information in HTML comments — they are publicly visible.

Advertisement

When to Use Comments

HTML – Good uses of comments
<!-- ===================== HEADER ===================== -->
<header class="site-header">
  <nav>...</nav>
</header>
<!-- =================== END HEADER =================== -->

<!-- ====================== HERO ====================== -->
<section class="hero">
  ...
</section>

<!-- TODO: Replace placeholder image with final product photo -->
<img src="placeholder.jpg" alt="Product photo coming soon">

<!-- NOTE: This div is needed for the JavaScript slider to work.
     Do not remove even though it appears empty. -->
<div id="slider-container"></div>

<!-- Temporarily disabled — A/B testing in progress
<div class="old-banner">
  <p>Old promotional message</p>
</div>
-->

Comment Shortcuts

In VS Code, select code and press Ctrl+/ (Windows/Linux) or Cmd+/ (Mac) to toggle HTML comments on/off. This is the fastest way to comment out sections during debugging.

HTML Comments: Visible to Anyone Who Views Source

An HTML comment is <!-- ... -->. The browser ignores it, but — unlike server-side code — it's shipped to the user and visible in "View Source." That has a real consequence.

<!-- Navigation -->
<nav>...</nav>

<!-- ❌ NEVER do this — the whole world can read it -->
<!-- TODO: temp admin password is hunter2 -->
DoDon't
label sectionsleave sensitive notes
temporarily disable markuprely on them being private

The security point: HTML comments travel to the browser and are trivially readable by anyone (right-click → View Source). Never put passwords, internal URLs, API keys, or "TODO: security hole here" notes in them. Handy uses: labeling major sections for other developers, and temporarily "commenting out" a block of markup while debugging (<!-- <div>...</div> -->). Gotcha: you can't nest comments — a --> inside ends the whole comment early. Note: comments add bytes to every page load, so production build tools often strip them; keep them in your source for clarity, but don't rely on them for anything the user shouldn't see.

🏋️ Practical Exercise

  1. Add a comment above your <h1> explaining what the page is for.
  2. Comment out a whole paragraph so it stops showing in the browser, then open View Source to confirm it is still in the HTML.
  3. Write a multi-line comment describing a section of your page.
  4. Use a comment to leave a TODO note for a feature you will add later.
  5. Open DevTools and confirm your comments appear in the page source.

🔥 Challenge Exercise

Build a small page with three regions (header, content, footer). Add a descriptive comment before each region. Then temporarily disable the footer using a comment without deleting it, reload, and re-enable it. In a final comment, explain why comments are useful for debugging.

📋 Summary

  • Syntax: <!-- comment text --> — everything inside is ignored by the browser.
  • Comments are publicly visible in page source — never put sensitive data in them.
  • Good uses: section dividers, TODO notes, explaining non-obvious structure, temporarily disabling code.
  • VS Code shortcut: Ctrl+/ to toggle comments on selected HTML.

Interview Questions

  • What is the syntax for an HTML comment?
  • Are HTML comments visible to website visitors?
  • Can HTML comments be nested inside each other?
  • Why should you avoid putting sensitive information in HTML comments?
  • How are comments useful when debugging a broken layout?
🌐 HTML Entities 🌐 HTML Syntax

FAQ

Do HTML comments slow down my page? +

Negligibly. A comment adds a few bytes and the parser simply skips it. For production, build tools often strip comments to trim file size, but the performance impact is tiny either way.

Can I use comments to hide code from users? +

No. Anyone can open View Source or DevTools and read commented-out HTML. Never store passwords, API keys, or private notes in comments.

Advertisement