HTML Comments

📝 What Are HTML Comments?

HTML comments are notes or explanations added within your HTML code that do not appear in the browser output. They're used by developers to describe sections of code, provide documentation, or temporarily disable parts of HTML.

>>“Comments don’t affect what users see — but they change how developers understand.” 💡

🔤 Syntax

HTML comments start with <!-- and end with -->. Anything between these will be ignored by the browser.

Basic HTML Comment

<!-- This is a comment -->
<p>This is visible text.</p>

🎯 Why Use Comments?

  • 🧭 Add notes or descriptions for future reference
  • 🧪 Temporarily disable elements during testing
  • 👨‍💻 Collaborate better with other developers
  • 📚 Mark TODOs or tasks inside HTML

🧪 Examples

Use Cases for HTML Comments

<!-- Main section starts here -->
<section>
  <h1>Welcome</h1>
  <p>This is the intro.</p>
</section>

<!-- TODO: Add footer after client approval -->

<!-- <p>This paragraph is hidden by comment</p> -->

Note

⚠️ Comments cannot be nested. Avoid using <!-- inside another comment block.

🔍 Where Can You Use Comments?

You can place comments almost anywhere in an HTML document — inside the <head>, between tags, or inline with other elements. However, be careful not to break elements like inside <title> or attributes.

Note

💡 Place comments on their own line for better readability in large projects.

🚫 Don't Do This

Incorrect Comment Placement

<p>This is <!-- inline comment --> a paragraph.</p>

Note

⚠️ While browsers may handle inline comments, it's considered bad practice as it can interfere with layout or formatting.

📚 Learn More

>>“Code is read more often than it is written. Comment wisely.” — Anonymous ✍️