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.
Ad – 336×280
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.
📋 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.