HTML Comments

Comments are essential for documenting your code, leaving notes for yourself and others, and temporarily disabling content during development.

Basic Comment Syntax

<!-- This is a single-line comment -->
<p>This content is visible</p>

<!-- 
  This is a multi-line comment
  that spans several lines
  and can contain detailed explanations
-->
→
[Only the paragraph is visible in the browser]

Comment rules:

  • Start with <!-- and end with -->
  • Content inside is completely ignored by browsers
  • Can span multiple lines
  • Visible in page source code

Documentation Comments

<!-- Navigation Section -->
<!-- Contains main menu and user account links -->
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

<!-- Footer - Last updated: 2024-01-15 -->
<footer>© 2024 My Website</footer>
→
[Navigation and footer visible, comments document purpose]

Documentation best practices:

  • Explain complex sections or unusual code
  • Note dates, authors, or version information
  • Describe the purpose of major page sections
  • Include TODO items or future improvements

Temporarily Disabling Content

<div class="sidebar">
  <h3>Latest News</h3>
  <p>Breaking: New HTML tutorial released!</p>
  
  <!-- Temporarily disabled promotional banner
  <div class="promo">
    <h4>Special Offer!</h4>
    <p>50% off all courses this week</p>
  </div>
  -->
  
  <p>More content here...</p>
</div>
→
[Sidebar shows without the promotional banner]

Common use cases for disabling content:

  • Testing different layouts or content
  • Removing seasonal or time-sensitive content
  • Debugging by isolating problematic elements
  • Keeping backup versions of code

Development Notes

<!-- TODO: Add contact form validation -->
<!-- FIXME: Image not loading on mobile devices -->
<!-- NOTE: This section needs redesign for accessibility -->

<form>
  <!-- Author: Jane Doe, Created: 2024-01-10 -->
  <input type="email" placeholder="Your email">
  <button type="submit">Subscribe</button>
</form>
→
[Form displays normally, development notes hidden]

Common Errors

<!-- Wrong: Nested comments -->
<!-- Outer comment <!-- Inner comment --> still commented -->

<!-- Wrong: Missing closing -->
<!-- This comment never ends...

<!-- Wrong: Dashes in content -->
<!-- Don't use -- inside comments -->

<!-- Correct: Proper comment -->
<!-- Use comments responsibly -->

Practical Use: Team Development

<!-- 
  Product Landing Page
  Author: Development Team
  Last Updated: 2024-01-15
  Dependencies: Bootstrap 5, Custom CSS
-->

<!-- Hero Section - Marketing approved design -->
<section class="hero">
  <h1>Revolutionary Product</h1>
  <p>Transform your workflow today</p>
  
  <!-- A/B testing different CTA buttons
  <button class="cta-old">Learn More</button>
  -->
  <button class="cta-new">Start Free Trial</button>
</section>

<!-- TODO: Add testimonials section below -->
<!-- REVIEW: Check mobile responsiveness -->
→
[Professional landing page with clear documentation]

Your Task: Comment Practice

Create a page with:

  1. Section header with documentation comment
  2. Some content that is temporarily commented out
  3. Multi-line comment explaining code structure
  4. Development notes or TODO comments
Section 1/7Basic Comment Syntax

Basic Comment Syntax

Comment rules:Start with <!-- and end with -->Content inside is completely ignored by browsersCan span multiple linesVisible in page source code

HTML Comments

Comments are essential for documenting your code, leaving notes for yourself and others, and temporarily disabling content during development.

Basic Comment Syntax

<!-- This is a single-line comment -->
<p>This content is visible</p>

<!-- 
  This is a multi-line comment
  that spans several lines
  and can contain detailed explanations
-->
→
[Only the paragraph is visible in the browser]

Comment rules:

  • Start with <!-- and end with -->
  • Content inside is completely ignored by browsers
  • Can span multiple lines
  • Visible in page source code

HTML Editor

Preview