DEV Community

Cover image for HTML-101 #3. Comments & Naming Convention
Himanshu Bhatt
Himanshu Bhatt

Posted on

HTML-101 #3. Comments & Naming Convention

#webdev #beginners #discuss #tutorial

👋 Short Intro (Why I’m Writing This)

I’m currently learning HTML and decided to learn in public by documenting my journey.

This blog is part of my HTML-101 series, where I’m learning HTML step by step from scratch.

This series is not written by an expert — it’s a beginner learning out loud, sharing:

  • what I understand,
  • what confuses me,
  • and what I learn along the way.

The goal is to build consistency, clarity, and invite discussion.

📌 What This Blog Covers

In this post, I’ll cover:

  • What are HTML Comments
  • Syntax of HTML Comments
  • Basic Examples
  • Important Rule & Limitation
  • HTML Comments vs CSS Comments vs JavaScript Comments
  • HTML File Naming Convention
  • Standard Homepage Name
  • Common File Naming Conventions

📂 GitHub Repository

All my notes, examples, and practice code live here:

👉 GitHub Repo:

https://github.com/dmz-v-x/html-101

This repo is updated as I continue learning.

📚 Learning Notes

1. What are HTML Comments.

First of all what are comments?

Comments are simple text annotations within code that explain the purpose, logic, and history of the code making it easier for developers to understand, maintain, and collaborate on the software.

Comments are visible to developers, ignored during rendering, and do not appear on the webpage. But that doesn't mean commented HTML is not sent to the browser, browser still receives comments, the browser simply ignore them visually. So be mindful of what you add in your comments, never put confidential data in comments.

2. Syntax of HTML Comments

Syntax of HTML Comments:
<!-- This is a comment -->

Everything between <!-- and --> is ignored by the browser.

3. Basic Examples 

<!-- Page Header -->
<header>
  <h1>My Website</h1>
</header>

<p>Hello World</p>
<!-- This paragraph explains the welcome message -->
Enter fullscreen mode Exit fullscreen mode

4. Important Rule & Limitation

  • ❌ We CANNOT nest comments

This is invalid:

<!-- Outer comment
   <!-- Inner comment -->
Enter fullscreen mode Exit fullscreen mode

HTML will break.

  • ❌ Comments are NOT secure

Comments are visible in: Developer Tools
So never put: Password, API Keys, Confidential Logic inside comments.

<!-- Admin password: 123456 --> ❌ NEVER

  • ❌ Do NOT comment out large blocks permanently Use comments for explanation, not disabling features.

5. HTML Comments vs CSS Comments vs JavaScript Comments

Language Comment Syntax
HTML <!-- comment -->
CSS /* comment */
JavaScript // comment or /* comment */

6. HTML File Naming Convention

  • Use Lowercase Only

index.html ✅
HomePage.html ❌

  • No spaces in file names

about-us.html ✅
my portfolio.html ❌

  • hyphens vs underscore

hyphens - ✅ (recommended)
underscores _ ⚠️ (less preferred)

7. Standard Homepage Name

The standard homepage name of HTML file is: index.html

8. Common File Naming Conventions

File Type Example
Main page index.html
CSS style.css, main.css
JavaScript script.js, app.js
Images hero.jpg, logo.png

⚠️ Challenges / Mistakes I Faced

While learning about comments and naming convention for files in HTML the thing that was new for me is that commented HTML still gets received by the browser and we can read it by inspecting them.

So being mindful about what we comment was the key takeaway for me.

If you faced any issues or have any questions, do let me know in the comments 🙂

💬 Feedback & Discussion

💡 I’d love your feedback!

If you notice:

  • something incorrect,
  • a better explanation,
  • or have suggestions to improve my understanding,

please comment below. I’m happy to learn and correct mistakes.

⭐ Support the Learning Journey

If you find these notes useful:

⭐ Consider giving the GitHub repo a star —

it really motivates me to keep learning and sharing publicly.

🐦 Stay Updated (Twitter / X)

I share learning updates, notes, and progress regularly.

👉 Follow me on Twitter/X:

https://x.com/_himanshubhatt1

🔜 What’s Next

In the next post, I’ll be covering:

👉 Headings, Paragraphs & Line Breaks

I’ll also continue updating the GitHub repo as I progress.

🙌 Final Thoughts

Thanks for reading!

If you’re also learning HTML, feel free to:

  • follow along,
  • share your experience,
  • or drop questions in the comments 👋

📘 Learning in public

📂 Repo: https://github.com/dmz-v-x/html-101
🐦 Twitter/X: https://x.com/_himanshubhatt1
💬 Feedback welcome — please comment if anything feels off
⭐ Star the repo if you find it useful

Top comments (0)