HTML Comments
Adding notes and documentation to your HTML code
💭 What are HTML Comments?
HTML comments are notes in your code that are not displayed in the browser. They help document your code and make it easier to understand for yourself and other developers.
<!-- This is a comment -->
<h1>Welcome to My Website</h1>
<!-- This comment explains the heading above -->
<p>This paragraph is visible to users.</p>
Output (comments are invisible):
Welcome to My Website
This paragraph is visible to users.
Comment Uses
Documentation
Explain what your code does
<!-- Navigation menu -->Disable Code
Temporarily hide elements
<!-- <p>Hidden text</p> -->Organization
Separate sections of code
<!-- Header Section -->Reminders
Notes for future updates
<!-- TODO: Add contact form -->🔹 Basic Comment Syntax
HTML comments start with <!-- and end with -->:
<!-- This is a single line comment -->
<!--
This is a
multi-line comment
that spans several lines
-->
<h1>Page Title</h1>
<!-- The heading above introduces the page -->Comment Rules:
- Comments are not displayed in the browser
- They can span multiple lines
- Cannot be nested inside other comments
- Visible in the page source code
🔹 Documenting Your Code
Use comments to explain sections and functionality:
<!-- Website Header -->
<header>
<!-- Main navigation menu -->
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<!-- Main content area -->
<main>
<h1>Welcome</h1>
<!-- Introduction paragraph -->
<p>This is the main content.</p>
</main>Output:
Welcome
This is the main content.
🔹 Temporarily Disabling Code
Comment out code to temporarily hide it:
<h1>My Website</h1>
<p>This paragraph is visible.</p>
<!-- Temporarily disabled
<p>This paragraph is hidden.</p>
<img src="image.jpg" alt="Hidden image">
-->
<p>This paragraph is also visible.</p>Output:
My Website
This paragraph is visible.
This paragraph is also visible.
🔹 Best Practices for Comments
Follow these guidelines for effective commenting:
<!-- ===== HEADER SECTION ===== -->
<header>
<!-- Company logo and branding -->
<div class="logo">
<img src="logo.png" alt="Company Logo">
</div>
</header>
<!-- ===== MAIN CONTENT ===== -->
<main>
<!-- TODO: Add search functionality here -->
<!-- FIXME: Update contact information -->
<h1>Welcome</h1>
<p>Content goes here.</p>
</main>
<!-- ===== FOOTER SECTION ===== -->Comment Best Practices:
- Use clear, descriptive comments
- Don't over-comment obvious code
- Use TODO and FIXME for reminders
- Organize sections with dividers
- Keep comments up-to-date