🌱BeginnerHTML Foundations
HTML Comments
Add developer notes and temporarily disable markup with HTML comment syntax.
Overview
HTML comments are pieces of text in your source code that the browser ignores and does not render on the page. They are visible in the HTML source but have no effect on the displayed content.
Syntax: <!-- comment goes here -->
Comments are used to:
- Leave notes for yourself or teammates
- Temporarily disable HTML sections during development
- Mark sections of large HTML files for navigation
- Explain non-obvious decisions in the markup
Important: HTML comments are visible to anyone who views the page source. Never put passwords, API keys, or sensitive information in comments.
Key Points
- •<!-- comment --> is the only comment syntax in HTML
- •Comments can span multiple lines
- •Browsers do not render comments they are invisible on the page
- •Comments are visible in the page source never put sensitive info in them
- •Commenting out code lets you temporarily disable sections without deleting them
- •Conditional comments (<!--[if IE]>) were IE-only and are now obsolete
Examples
Basic HTML comments
<!DOCTYPE html>
<html lang="en">
<head>
<!-- This is the page metadata section -->
<meta charset="UTF-8">
<title>My Page</title>
</head>
<body>
<!-- Main navigation -->
<nav>
<a href="/">Home</a>
</nav>
<!-- TODO: Add hero image here -->
<!-- Temporarily disabled section:
<section class="promo">
<p>Winter sale 50% off!</p>
</section>
-->
<main>
<h1>Welcome</h1>
</main>
</body>
</html>Multi-line comment for section headers in large files
<!-- ============================================
HERO SECTION
Full-width banner with CTA button
============================================ -->
<section class="hero">
<h1>Build the Web</h1>
<a href="/start" class="cta">Get Started</a>
</section>
<!-- ============================================
FEATURES SECTION
============================================ -->
<section class="features">
...
</section>Banner-style comments help navigate large HTML files.
Common Mistakes
- Leaving passwords, tokens, or TODO credentials in HTML comments
- Nesting comments <!-- <!-- inner --> --> is invalid HTML and breaks the outer comment
- Using comments for "dead code" delete unused code rather than commenting it forever
Note
Use comments sparingly. Good HTML structure and semantic elements are self-documenting. Add a comment only when the why is non-obvious like a workaround for a browser bug, or a deliberate ordering choice.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4