HTML Tutorial: HTML Comments
How to add notes, hide code, and use comments for clean HTML projects
HTML comments are used to leave notes in your code or temporarily hide code. They are invisible in the browser.
Syntax:
<!-- Your comment here -->
1️⃣ Basic Comment
INPUT (Colored Code):
<!--This is a comment-->
<p>Hello World!</p>
OUTPUT (Browser Result):
Hello World!
✔️ The comment is not visible in the browser ✔️ Useful for notes to yourself or other developers
2️⃣ Comment Out Code
You can temporarily disable code using comments.
INPUT:
<!-- <p>This text is hidden</p> -->
<p>This text is visible</p>
OUTPUT:
This text is visible
✔️ Everything inside <!-- --> is ignored
✔️ Useful for debugging or temporary removal
3️⃣ Multiline Comments
INPUT:
<!--
This is a multi-line comment.
It can span several lines.
Great for explanations or notes.
-->
<p>Visible paragraph</p>
OUTPUT:
Visible paragraph
✔️ Comments can span multiple lines ✔️ Perfect for documenting sections of code
4️⃣ Notes for Developers
INPUT:
<!-- TODO: Add navigation menu here -->
<p>Welcome to my website!</p>
OUTPUT:
Welcome to my website!
✔️ Comments are a great way to leave reminders (e.g., TODO, FIXME) ✔️ Helps team collaboration and clean code maintenance
🎯 Best Practice
- Use comments for notes and explanations
- Never put sensitive info in comments (it is visible in source code)
- Keep comments clear and concise
- Use multiline comments for sections of code
🚀 What’s Next?
👉 HTML Colors
Next lesson will teach:
- Text and background colors
- Hex, RGB, and named colors
- Color styling with examples
Comments help you write readable and maintainable HTML code. Always document your work!