Example 1 — Basic Comment Syntax
html
<h1>Comments demo</h1>
<!-- This note is for developers only -->
<p>This paragraph is visible on the page.</p>How It Works
Only the h1 and p render. The comment line is skipped entirely.
HTML Comments
Overview
Introduction
HTML comments are snippets of text or code that are not visible to visitors when the webpage is rendered. They help developers understand, organize, and navigate source files.
Comments can also temporarily disable markup during development and testing without deleting it. This tutorial covers syntax, practical use cases, pitfalls, and a complete annotated page example.
What You’ll Learn
Syntax
<!-- -->
Document
Explain code.
Disable
Comment out.
Placement
head & body.
Pitfalls
No nesting.
Practice
Best habits.
Fundamentals
What Are HTML Comments?
HTML comments are text blocks enclosed within special delimiters that the browser ignores during rendering. They let developers leave notes, explanations, or reminders in the markup without affecting what users see on screen.
Comments are for humans reading source code—not for styling (use CSS) or hiding content from users (use appropriate HTML/CSS techniques instead).
Beginner Tip
There is no <comment> HTML element. Comments are written with the <!-- ... --> syntax only. See the comment tag reference for a deep dive on rules and edge cases.
Syntax
How to Write HTML Comments
To write a comment in HTML, use this syntax:
html
<!-- This is a comment -->Everything between <!-- and --> is a comment and will not appear in the browser. The delimiters themselves are never shown on the page.
For longer notes, span multiple lines:
html
<!--
Navigation partial
Last updated: July 2026
-->Debugging
Commenting Out Code
During development, you may want to temporarily disable a section of HTML without deleting it. Wrap the markup in comment delimiters:
html
<!--
<p>This paragraph is commented out and will not appear on the webpage.</p>
-->This technique is useful for A/B testing layouts, isolating bugs, or keeping draft content in the file until it is ready to publish.
Remember
Commented-out scripts and styles are still in the file—they are just not parsed as HTML. Do not comment out production security headers or critical accessibility markup and forget to restore them.
Caution
Nested Comments
HTML does not support nested comments. If you put --> inside what you think is an outer comment, the browser closes the comment at the first -->, which can expose raw markup or break the page.
html
<!--
This is a comment
<!-- This inner comment is NOT supported -->
The rest may be parsed as HTML!
-->If you need to disable a block that already contains comments, remove or rewrite the inner <!-- / --> pairs first, or use version control instead of nesting.
Structure
Comments in Different HTML Elements
Comments can be placed almost anywhere in an HTML document—in the head, body, or between elements. They are commonly used to label major sections:
<head>— document scripts, stylesheets, or meta tags.<body>— mark header, main, sidebar, and footer regions.- Between tags — short TODO notes for the next developer.
You can also place a comment inline inside a paragraph:
html
<p>This is a paragraph. <!-- Comment inside a paragraph --> This text is visible.</p>Avoid placing comments inside attribute values (e.g. inside class="...") or splitting opening tags—that breaks HTML parsing.
Production
SEO and Performance Considerations
HTML comments do not appear on the rendered page, so they do not directly change how content looks to users or screen readers. Search engines generally ignore comment text for ranking purposes.
However, excessive comments increase HTML file size slightly, which can marginally affect download time on very large pages. Keep comments concise and remove obsolete notes before shipping to production when file size matters.
Security: Comments are visible in View Source. Never store passwords, API keys, internal URLs, or personal data in comments.
Cheat Sheet
⚡ Quick Reference
| Task | Syntax |
|---|---|
| Single-line comment | <!-- note --> |
| Multi-line comment | <!-- line 1 |
| Comment out HTML | Wrap tags in <!-- ... --> |
| Opens comment | <!-- |
| Closes comment | --> |
| Nested comments | Not supported |
| Visible to users? | No (only in source) |
Hands-On
Examples Gallery
Six examples from basic syntax to a full documented page. Each includes View Output and Try It Yourself.
📚 Getting Started
Syntax and disabling markup.
Example 2 — Comment Out a Block
html
<p>This paragraph appears.</p>
<!--
<p>This paragraph is commented out.</p>
-->How It Works
The second paragraph is inside the comment block, so the browser never creates it in the DOM.
📝 Documentation
Multi-line notes and inline reminders.
Example 3 — Multi-Line Section Comment
html
<!--
Site header region
Updated: July 2026
-->
<header>
<h1>My Blog</h1>
</header>How It Works
Multi-line comments help teammates find sections quickly in large templates.
Example 4 — Inline Comment in a Paragraph
html
<p>
This is a paragraph.
<!-- TODO: add link here -->
This text is still visible.
</p>How It Works
The TODO comment is invisible; surrounding sentence text flows normally.
Example 5 — Comments in the Head
html
<head>
<title>My Page</title>
<!-- Primary stylesheet — do not remove -->
<link rel="stylesheet" href="styles.css">
</head>How It Works
Document critical assets in head so future edits do not accidentally remove required files.
Example 6 — Complete Example
A simple HTML document with comments in head, body, and footer:
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Comments Example</title>
<!-- Head: metadata and assets -->
</head>
<body>
<h1>Welcome to My Website</h1>
<!-- Main content starts here -->
<p>This is a paragraph on the website.</p>
<!-- <p>This paragraph is commented out.</p> -->
<footer>
<!-- Footer information -->
<p>© 2026 My Website</p>
</footer>
</body>
</html>How It Works
Comments label each region. The inner commented p is disabled; the footer comment documents purpose without showing text.
Pro Tips
Best Practices for Using Comments
✅ Do
- Explain why code exists, not what every obvious tag does
- Keep a consistent comment style across the project
- Update or remove outdated comments when code changes
- Use comments to label major template sections
- Comment out code temporarily during debugging
❌ Don’t
- Store secrets, tokens, or private URLs in comments
- Nest comments inside other comments
- Over-comment every line—clutter hurts readability
- Put comments inside attribute values
- Leave large blocks of dead commented code in production
Applications
🚀 Common Use Cases
- Team handoffs — explain non-obvious markup decisions.
- Debugging — disable scripts or sections to isolate bugs.
- Template markers — label
header,main, andfooterin large files. - TODO tracking — short reminders before launch (remove later).
- Conditional drafts — keep alternate copy commented until approved.
- Learning — annotate tutorial HTML for students.
Compatibility
Universal Browser Support
HTML comments have been supported since the earliest HTML specifications. Every modern and legacy browser ignores comment content when parsing markup.
Baseline · Since HTML
HTML comment syntax
HTML comments have been supported since the earliest HTML specifications. Every modern and legacy browser ignores comment content when parsing markup.
100% Core tag support
Google Chrome All versions · Desktop & Mobile
Full supportMozilla Firefox All versions · Desktop & Mobile
Full supportApple Safari All versions · macOS & iOS
Full supportMicrosoft Edge All versions · Chromium & Legacy
Full supportInternet Explorer IE 6+ · Legacy environments
Full supportOpera All modern versions
Full supportHTML comment syntax Universal
Bottom line: Use comments freely in any HTML document. Behavior is identical across browsers.
Wrap Up
Conclusion
HTML comments are a valuable tool for developers. They document code, organize complex projects, and let you disable markup safely during development. Follow best practices, avoid nesting, and never treat comments as a place for secrets.
For exhaustive rules and edge cases, read the HTML comment tag reference. Next, continue with HTML Multimedia to embed audio and video in your pages.
Summary
Key Takeaways
01
<!-- -->
Syntax.
Core 02
Hidden
Not on page.
Render 03
Disable
Comment out.
Debug 04
No nest
One level.
Rules 05
Source
No secrets.
Security❓ Frequently Asked Questions
An HTML comment is a note in your source code wrapped in <!-- and -->. Browsers skip comments when rendering the page, so visitors never see them. Developers use comments to explain code or temporarily disable markup.
Use <!-- your note here -->. For multiple lines, put the opening <!-- on one line, write your note, then close with --> on a later line. Everything between the delimiters is ignored by the browser.
Comments are hidden on the rendered page but visible in View Source, browser DevTools, and downloaded HTML files. Never put passwords, API keys, or private data inside comments.
Wrap the markup you want to disable inside <!-- and -->. The browser treats it as a comment and does not render those tags. Remove the comment delimiters when you want the code back.
No. HTML does not support nested comments. The first --> closes the comment, which can leave leftover text parsed as HTML and break your page. Use one comment block at a time.
Search engines generally ignore comment text for ranking. However, very large comment blocks increase HTML file size slightly. Keep comments concise and avoid stuffing keywords into comments—it does not help SEO.
Did you know?
HTML comments inspired similar syntax in other languages—but the rules differ. In HTML, the sequence --> anywhere inside a comment ends it immediately, which is why nested comments fail. CSS and JavaScript have their own comment syntax (/* */ and //) that does not work in HTML markup.
Practice comments in the editor
Comment out paragraphs, add TODO notes, and see what still renders on the page.
About the author
6 people found this page helpful