HTML — Lesson 12
HTML Comments
Documenting your code with comments for future reference.
HTML Comments
Comments are notes in your code that browsers ignore completely. They help developers understand, organize, and maintain the codebase.
Comment Syntax
<!-- This is a single-line comment -->
<!--
This is a
multi-line comment
that spans several lines
-->
When to Use Comments
- Explain complex sections: Describe why a certain approach was used
- Mark sections: Identify parts of the page for easy navigation
- Comment out code: Temporarily disable code without deleting it
- Add TODOs: Mark areas that need future work
<!-- ===== HEADER SECTION ===== -->
<header>
<nav>...</nav>
</header>
<!-- TODO: Add search functionality here -->
<div class="search-bar">
<!-- Search input goes here -->
</div>
<!-- Deprecated: Do not use this layout
<div class="old-layout">...</div>
-->
Comments in the Browser
When you view page source or use browser developer tools (F12), you will see your HTML comments. Keep that in mind - do not put sensitive information in comments.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Comments Example</title>
</head>
<body>
<!-- This heading is the page title -->
<h1>Welcome!</h1>
<!--
Navigation will be added here
after the design is approved.
Target date: next sprint.
-->
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
<!-- <p>This paragraph is hidden</p> -->
<p>This paragraph is visible!</p>
</body>
</html>
Common Mistakes
- Comments cannot contain
--inside them:<!-- bad --comment --> - Comments cannot be nested:
<!-- <!--inner--> -->breaks - Never hide credentials, API keys, or private URLs in comments
Tip: Good comments explain why, not what. Instead of
<!-- This is a heading -->, write <!-- Section heading for the product launch -->.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →