🟢 Foundation · Lesson 08

Comments in HTML

HTML में Comments

The Syntax — one pattern, any length

<!-- This is a comment. The browser ignores it completely. -->

<!-- 
   Multi-line comments work too:
   Author: Gagan
   Last updated: July 2026
-->

<p>Visible text</p>  <!-- comment can sit at the end of a line -->

Visible text

A comment is a pencil note in the margin of a book — the reader of the printed story (the browser) never sees it; only someone opening the manuscript (the code) does. Starts with , no nesting allowed (a comment inside a comment breaks).

3 Real Uses (not just theory)

<!-- USE 1: Labeling sections of a long page -->
<!-- ===== HEADER START ===== -->
   ...50 lines...
<!-- ===== HEADER END ===== -->

<!-- USE 2: Debugging - switch code OFF without deleting -->
<!-- <img src="banner-old.jpg"> -->
<img src="banner-new.jpg">

<!-- USE 3: Notes for teammates (or future you) -->
<!-- TODO: replace phone number after new SIM activates -->

Use 2 is the daily workhorse: something misbehaving? Comment out half the code, refresh, and see if the problem disappears — binary search for bugs. Every professional debugs HTML this way.

The Shortcut that saves hours

VS Code: select the lines → press Ctrl + / → wraps them in  instantly. Press Ctrl + / again → uncomments. (Mac: Cmd + /)

Nobody types <!-- by hand after learning this. Select, Ctrl+/, done.

The Security Warning

<!-- admin password: alpine@123 -->        ❌ NEVER
<!-- database: u30133_school -->           ❌ NEVER

Comments are invisible on the page but 100% visible in the source. Anyone pressing Ctrl+U reads every comment you wrote. Passwords, API keys, database names, internal URLs — never in HTML comments. Real attackers genuinely scan site source for exactly these leftovers.

Exam Corner

Q: Write the comment syntax. 

Q: Are comments visible to visitors? Not on the rendered page, but yes in View Source (Ctrl+U) — hence never put secrets in them.

Q: Can comments be nested? No — the first --> ends the comment, breaking the outer one.

Syntax — एक pattern, कितनी भी लंबाई

<!-- Yeh ek comment hai. Browser ise poori tarah ignore karta hai. -->

<!-- 
   Multi-line comments bhi chalte hain:
   Author: Gagan
   Last updated: July 2026
-->

<p>Visible text</p>  <!-- comment line ke end me bhi baith sakta hai -->

Visible text

Comment किताब के हाशिये पर pencil का note है — छपी कहानी का पाठक (browser) उसे कभी नहीं देखता; सिर्फ manuscript (code) खोलने वाला देखता है. शुरुआत  से, nesting allowed नहीं (comment के अंदर comment टूट जाता है).

3 असली Uses (सिर्फ theory नहीं)

<!-- USE 1: Lambe page ke sections par label -->
<!-- ===== HEADER START ===== -->
   ...50 lines...
<!-- ===== HEADER END ===== -->

<!-- USE 2: Debugging - code DELETE kiye bina OFF karo -->
<!-- <img src="banner-old.jpg"> -->
<img src="banner-new.jpg">

<!-- USE 3: Teammates (ya future aap) ke liye notes -->
<!-- TODO: nayi SIM activate hote hi phone number badlo -->

Use 2 रोज़ का हथियार है: कुछ गड़बड़ है? आधा code comment out कीजिए, refresh, देखिए problem गई या नहीं — bugs की binary search. हर professional HTML ऐसे ही debug करता है.

वह Shortcut जो घंटे बचाता है

VS Code: lines select karo → dabao Ctrl + / → turant  me lipat jati hain. Dobara Ctrl + / → uncomment. (Mac: Cmd + /)

यह सीखने के बाद <!-- हाथ से कोई नहीं लिखता. Select, Ctrl+/, खत्म.

Security Warning

<!-- admin password: alpine@123 -->        ❌ KABHI NAHI
<!-- database: u30133_school -->           ❌ KABHI NAHI

Comments page पर invisible हैं पर source में 100% visible. Ctrl+U दबाने वाला हर आपका comment पढ़ता है. Passwords, API keys, database के नाम, internal URLs — HTML comments में कभी नहीं. असली attackers सच में site source में यही बची-खुची चीज़ें scan करते हैं.

Exam Corner

Q: Comment syntax लिखिए. 

Q: क्या comments visitors को दिखते हैं? Rendered page पर नहीं, पर View Source (Ctrl+U) में हां — इसीलिए इनमें secrets कभी नहीं.

Q: क्या comments nest हो सकते हैं? नहीं — पहला --> comment खत्म कर देता है, बाहरी वाला टूट जाता है.

← Back to HTML Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.