HTML Comments

Beginner
⏱️ 4 min read
📚 Updated: Jun 2026
🎯 4 Examples
Markup & Syntax
HTML comments tutorial — <!-- --> syntax and best practices
Overview

What You’ll Learn

By the end of this tutorial, you’ll write HTML comments with the correct <!-- --> syntax and avoid common beginner mistakes.

01

Comment Syntax

Use <!-- -->—there is no <comment> element.

02

Hidden from Users

Browsers ignore comments when rendering the page.

03

Documentation

Leave notes for yourself and teammates in the source.

04

Debugging

Temporarily disable HTML blocks without deleting code.

05

Security Rules

Never store passwords or API keys in comments.

06

Syntax Rules

Learn nesting limits and common mistakes to avoid.

Fundamentals

What Are HTML Comments?

HTML comments are notes in your source code that browsers do not display on the page. They use the <!-- --> syntax—there is no <comment> HTML element.

⚠️
Not an HTML element

Comments are markup syntax, not a tag like <p> or <div>. Always write <!-- Your comment here -->—never <comment>...</comment>.

A comment is text in the HTML source that is ignored by the browser when rendering. It helps developers explain code, mark sections, or temporarily disable markup.

Foundation

📝 Syntax

Single-line and multi-line comments use the same delimiters:

comment-syntax.html
<!-- Single-line comment -->

<!--
  Multi-line comment
  spanning several lines
-->

Syntax Rules

  • Start every comment with <!-- and end with -->.
  • Comments are invisible on the rendered page but remain in View Source.
  • You cannot nest comments—the first --> closes the comment.
  • Do not put passwords, API keys, or secrets inside comments.
Cheat Sheet

⚡ Quick Reference

FeatureSyntax / RuleNotes
Start delimiter<!--Begins every comment
End delimiter-->Closes the comment
HTML element?NoMarkup syntax only
Visible on page?NoHidden from rendered output
NestingNot allowedCannot comment inside a comment
SecurityPublic in sourceAnyone can read via View Source
Comparison

⚖️ Comments vs HTML Elements

Comments are fundamentally different from HTML tags:

FeatureHTML CommentHTML Element
Syntax<!-- text --><tag>...</tag>
Rendered?No — ignored by browserYes — displayed on page
AttributesNoneGlobal and tag-specific attrs
Example<!-- Header --><p>Hello</p>
Reference

🧰 Attributes

HTML comments are not an element, so they have no attributes:

class N/A

Comments cannot have a class—they are not DOM nodes.

Not applicable
id N/A

Comments cannot be targeted with CSS or JavaScript by id.

Not applicable
Syntax Required

Only valid form: <!-- comment text -->

<!-- -->
Multi-line Allowed

Same delimiters work across multiple lines.

<!-- ... -->
Nesting Forbidden

Cannot put <!-- inside another comment.

Invalid
Visibility Source only

Visible in View Source and DevTools, not on the page.

Public

Comments are for developers reading the HTML file—not for styling or scripting.

Hands-On

Examples Gallery

Documentation, debugging, section labels, and syntax rules with copy-ready code and live previews.

Live Preview

Only the paragraph below renders. The comment above it exists in source code only:

This text is visible on the page.

(A comment sits above this in the HTML source but is not shown here.)

Document Your Code

Leave a short note explaining what a section does.

code-documentation.html
<!-- This section handles the login message -->
<p>Welcome! Please log in to continue.</p>
Try It Yourself

📚 Common Use Cases

Developers use HTML comments to document sections, label layout regions, temporarily disable markup while debugging, and leave notes for teammates.

Comment Out HTML for Debugging

Wrap markup in a comment to disable it without deleting the code.

debug-comment.html
<!--
<div class="debug-box">
  Temporarily disabled block
</div>
-->
<p>Only this paragraph renders.</p>
Try It Yourself

Label Page Sections

Use comments as signposts in large HTML files.

section-labels.html
<!-- ===== Header Section ===== -->
<header>...</header>

<!-- ===== Main Content Section ===== -->
<main>...</main>
Try It Yourself

Rules and Common Mistakes

Know what is valid and what to avoid as a beginner.

comment-rules.html
<!-- Valid comment -->

<!-- WRONG: no <comment> element exists -->

<!-- WRONG: do not store API keys or passwords here -->
Try It Yourself
Source Code

Comment Syntax in Code Editors

Comments are not styled with CSS on the page—they never render. In editors and syntax highlighters, comment text is usually shown in a muted color so you can distinguish notes from active markup:

<!-- Opening delimiter
--> Closing delimiter
View Source Visible in HTML file
Not in DOM Skipped when rendering
page-with-comments.html
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Meta tags and title go here -->
  <title>My Page</title>
</head>
<body>
  <!-- ===== Hero Section ===== -->
  <section class="hero">
    <h1>Welcome</h1>
  </section>
</body>
</html>

What users see vs. what developers read

Rendered page: only the heading “Welcome” appears.

HTML source: comments remain visible between delimiters for developers.

Security

🔒 Security Note

🔒
Comments are not private

HTML comments are visible to anyone via View Source or browser DevTools. Never store passwords, API keys, tokens, or sensitive data in comments.

  • Treat every comment as public text in your HTML file.
  • Use environment variables or server-side config for secrets—not HTML comments.
  • Remove debug comments before shipping to production when they expose internal details.
A11y

♿ Accessibility

Comments are invisible to users and assistive technologies:

  • Screen readers skip comments — they are not part of the accessibility tree.
  • Do not hide important content in comments — users cannot read notes in the source.
  • Use visible text for user-facing info — comments are for developers only.
  • Keep comments concise — they add to file size without helping end users.

🧠 How HTML Comments Work

1

Developer writes a comment

Text between <!-- and --> in the HTML file.

Source
2

Browser parses and skips it

Comments are ignored during page rendering.

Parsing
3

Comment stays in source

Still visible in View Source and developer tools.

Visibility
=

Cleaner, documented code

Notes for developers without affecting what users see on the page.

Compatibility

Universal Browser Support

All browsers ignore HTML comments when rendering pages. Comments are a universal part of HTML syntax, not a feature that varies by browser.

✓ Baseline · Since HTML 2

Comments ignored everywhere

From legacy Internet Explorer to the latest mobile browsers — every engine skips comment nodes during rendering.

100% Syntax support
Google Chrome All versions · Ignored
Full support
Mozilla Firefox All versions · Ignored
Full support
Apple Safari All versions · Ignored
Full support
Microsoft Edge All versions · Ignored
Full support
Internet Explorer IE 6+ · Ignored
Full support
Opera All modern versions · Ignored
Full support
HTML comment syntax 100% supported

Bottom line: Use <!-- --> with confidence. Every browser ignores comments during rendering while keeping them in the source for developers.

Wrap Up

Conclusion

HTML comments use <!-- --> syntax to add developer notes that browsers do not display. They help you document code, organize structure, and debug—but they are not an HTML element, cannot be nested, and must never contain secrets.

View Examples Gallery Try HTML Comments
Pro Tips

💡 Best Practices

✅ Do

  • Use <!-- --> for all comments
  • Keep comments short and helpful
  • Label major page sections
  • Remove outdated comments when code changes

❌ Don’t

  • Use a fictional <comment> tag
  • Store passwords or API keys in comments
  • Nest comments inside comments
  • Over-comment obvious markup
Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about HTML comments

Bookmark these before you ship — they’ll keep your source clean and secure.

6
Core concepts
📝 01

Syntax

Use <!-- text --> — not a tag element.

Foundation
🚫 02

No <comment> tag

There is no HTML comment element in the spec.

Essential
👁 03

Hidden from users

Browsers skip comments when rendering the page.

Behavior
🔍 04

Visible in source

View Source and DevTools still show comment text.

Visibility
🔄 05

No nesting

The first --> closes the comment block.

Syntax
🛠 06

Docs & debugging

Great for notes, section labels, and comment-out debugging.

Pattern
🎯 You’re ready to write clean, documented HTML
Review Quick Reference →

❓ Frequently Asked Questions

No. Use <!-- --> syntax. There is no <comment> element in HTML.
No. Browsers ignore comments when rendering. They remain in the HTML source only.
No. Comments are public in View Source. Never store sensitive data in them.
No. The first --> closes the comment, which breaks nested attempts.
Documentation, section labels, and temporarily disabling HTML while debugging.

Write Your First Comment

Practice the correct <!-- --> syntax in the interactive HTML editor.

Try HTML Comments →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML colgroup Tag HTML data Tag