💬 HTML Comments — Write Code That Talks!
When building websites, you often need to leave notes, instructions, or reminders in your HTML files — especially when working on large projects or in teams. HTML comments allow you to do exactly that — without affecting what users see in the browser.
Let’s explore how comments work and why they’re an essential part of every developer’s workflow.
🧱 What is an HTML Comment?
An HTML comment is a non-displayed note added to your HTML code for reference. It does not appear in the web browser but can be seen in the page source.
✅ Syntax:
<!-- This is a comment -->
- Begins with
<!-- - Ends with
--> - Anything in between is ignored by the browser.
🧪 Example – Adding a Simple Comment
<!-- This section displays the main welcome message -->
<h1>Welcome to GoNimbus!</h1>
<p>Start building your web future today.</p>
💡 Tip: Comments are helpful to describe what your code does — especially when coming back to it after some time or collaborating with others.
🛑 Hide Elements Temporarily
You can use comments to hide specific content without deleting it. This is useful during development or debugging.
✅ Example – Hiding a Paragraph:
<p>This is visible.</p>
<!-- <p>This paragraph is hidden from view.</p> -->
<p>This is also visible.</p>
🧩 Hide Multiple Lines of HTML
You’re not limited to just one line. You can comment out entire sections when needed.
✅ Example – Hiding Multiple Elements:
<p>This is visible.</p>
<!--
<p>This part is under construction:</p>
<img src="new-feature.jpg" alt="Coming Soon">
<p>More exciting features ahead!</p>
-->
<p>This is still visible.</p>
🎯 Use Case: Hide a feature section that’s still being developed or tested.
🧰 Debug Your Code with Comments
Facing layout or display issues? Use comments to temporarily disable parts of your HTML and identify what’s causing the issue.
✅ Example – Isolating a Problem:
<!-- <div class="broken-section">This might be causing issues</div> -->
🔍 Hide Inline Content in a Tag
You can even comment within a tag’s content. This is useful to skip a word or phrase without deleting it.
✅ Example – Inline Comment:
<p>This <!-- amazing --> is a paragraph.</p>
Result:
This is a paragraph.
🧠 Real-World Use Cases
| Use Case | Benefit |
|---|---|
| Add notes for yourself | Understand your code later |
| Team collaboration | Communicate with other developers |
| Debugging layout or display | Find issues by hiding code temporarily |
| Version control | Keep backup of old code temporarily |
| Mark areas for improvement | Leave TODOs or FIXMEs in your HTML |
🚫 What NOT to Do
- ❌ Don’t put sensitive information (like passwords or API keys) in comments — they’re visible in page source.
- ❌ Don’t overuse comments. Keep them short, clear, and meaningful.
- ❌ Don’t forget to remove leftover comments before final deployment.
🧠 Quick Recap
| Tag | Purpose |
|---|---|
<!-- --> | Insert comments or hide HTML content |
💡 Pro Tip from GoNimbus
“Good code is not just functional — it’s readable. Comments bridge the gap between what code does and why it was written that way.”
🧪 Practice Time – Try It Yourself!
Comment out the second paragraph in the example below:
<p>This is the first visible paragraph.</p>
<p>This should be hidden temporarily.</p>
<p>This is the third visible paragraph.</p>
✅ Answer:
<p>This is the first visible paragraph.</p>
<!-- <p>This should be hidden temporarily.</p> -->
<p>This is the third visible paragraph.</p>
🚀 Learn More with GoNimbus
HTML is more than just code — it’s about writing structured, maintainable, and professional content. HTML comments are a small but powerful tool in your web development journey.