HTML Comments

HTML comments are super useful when you’re writing or debugging code. They let you leave notes, explain your code, or temporarily hide sections — and they don’t show up on the actual webpage.

Let’s look at how comments work and when to use them.

✍️ Basic Syntax

<!-- This is a comment -->

✅ Anything inside <!-- --> will not be rendered by the browser.

🔍 Example:

<p>This paragraph is visible.</p>

<!-- <p>This paragraph is commented out and will not show up.</p> -->

Tip: Use comments to explain sections of your code or disable code while testing.

🛠️ Use Cases for HTML Comments

✅ 1. Notes for Yourself or Others

<!-- This section displays the main blog posts -->
<section class="blog-posts">
  <!-- Loop starts here -->
</section>

Helps you or team members understand the code better later on.

✅ 2. Temporarily Remove or Hide HTML

<!--
<nav>
  <ul>
    <li><a href="#">Home</a></li>
  </ul>
</nav>
-->

Useful for testing changes without deleting code.

✅ 3. Mark TODOs or Fixes

<!-- TODO: Add a download button here -->

Great for collaborative projects or reminders.

⚠️ Do’s and Don’ts

❌ Invalid (Nested) Comment Example:

<!-- This is a comment <!-- This is nested and invalid --> -->

This will break your HTML in some browsers. HTML does not support nested comments.

🧪 Try This in Your HTML

<!-- Header Section -->
<header>
  <h1>My Portfolio</h1>
</header>

<!--
<p>This is a temporary note that won't show up on the site.</p>
-->

<!-- TODO: Add contact form here -->

📝 Quick Recap

👉 Coming Up Next:

Now that we’ve learned about basic structure and text, it’s time to format content using bold, italic, and more.

📚 Next: HTML Text Formatting