HTML Comments

HTML सीखते वक्त या किसी प्रोजेक्ट में काम करते वक्त, कई बार हमें कोड में notes या explanation लिखने की ज़रूरत होती है, ताकि बाद में खुद या कोई और डेवलपर समझ सके कि कोड का कौन-सा हिस्सा क्या कर रहा है। ऐसे नोट्स को HTML में Comments (टिप्पणियाँ) कहा जाता है। Comments ब्राउज़र में दिखते नहीं हैं, लेकिन कोड में मौजूद रहते हैं — जैसे पर्दे के पीछे छिपा हुआ मैसेज।

HTML Comment क्या है?

HTML Comment वह टेक्स्ट होता है जो कोड में लिखा जाता है लेकिन ब्राउज़र उसे render (दिखाता) नहीं है। यह सिर्फ़ डेवलपर के लिए होता है।

Syntax (Structure)

<!-- यह एक HTML comment है -->

यह हमेशा  पर खत्म होता है जो भी टेक्स्ट इनके बीच लिखा है — वह ब्राउज़र में नहीं दिखेगा

Example 1: Simple Comment

<!-- यह पेज का हेडिंग सेक्शन है -->
<h1>Welcome to My Website</h1>

<!-- यह पैराग्राफ यूजर को जानकारी देता है -->
<p>HTML सीखना बहुत आसान और मजेदार है!</p>

Output:

Welcome to My Website

HTML सीखना बहुत आसान और मजेदार है!

(लेकिन ब्राउज़र के View Source में आपको comments दिखेंगे।)

Example 2: Code को Temporarily Disable करना

आप कभी-कभी किसी कोड को टेस्ट करने के लिए बंद (disable) भी करना चाहते हैं ताकि वह रन न हो लेकिन डिलीट भी न करना पड़े — ऐसे में आप उसे comment में डाल सकते हैं

<!-- <p>यह पैराग्राफ फिलहाल डिसेबल है</p> -->
<p>यह पैराग्राफ ब्राउज़र में दिखेगा</p>

Output: - पहला पैराग्राफ ब्राउज़र में नहीं दिखेगा क्योंकि वह comment में है

यह पैराग्राफ ब्राउज़र में दिखेगा

Example 3: Multiple Line Comment

अगर आपको एक से ज़्यादा लाइन में comment लिखना है, तो कोई दिक्कत नहीं — बस सबकुछ  के बीच रखें।

<!-- 
यह वेबसाइट HTML सीखने वालों के लिए बनाई गई है।
नीचे वाला सेक्शन Tutorials के लिंक दिखाता है।
-->
<div>
  <a href="lesson1.html">HTML Introduction</a>
  <a href="lesson2.html">HTML Basic</a>
</div>

Example 4: कोड को Organize करने के लिए Comments

बड़े HTML फाइलों में Comments बहुत काम आते हैं sections को divide करने और readable structure बनाने के लिए।

<!-- ========================= -->
<!-- 🌟 HEADER SECTION START -->
<!-- ========================= -->
<header>
  <h1>My Website</h1>
</header>

<!-- ========================= -->
<!-- 📚 CONTENT SECTION START -->
<!-- ========================= -->
<main>
  <h2>Welcome to HTML Lessons</h2>
  <p>यहां आप HTML के सारे टॉपिक्स सीख सकते हैं।</p>
</main>

<!-- ========================= -->
<!-- 🧭 FOOTER SECTION START -->
<!-- ========================= -->
<footer>
  <p>Copyright © 2025</p>
</footer>

इस तरह के comments से कोड पढ़ना और maintain करना आसान हो जाता है।

Example 5: Comments Inside Elements (Not Recommended ❌)

<p>HTML सीखना <!-- बहुत --> आसान है!</p>

Output: - बेहतर होगा कि comments हमेशा elements के बाहर ही रखें।

HTML सीखना आसान है!

Important Tips

Comments पेज में नहीं दिखते — सिर्फ़ कोड में रहते हैं।
SEO पर कोई असर नहीं होता (Google इन्हें ignore करता है)।
बड़े प्रोजेक्ट्स में comments ज़रूरी हैं, ताकि टीम के सभी डेवलपर्स को समझ आए कि कोड क्या कर रहा है।
संवेदनशील जानकारी (जैसे पासवर्ड, API key) कभी भी comments में मत डालें —
क्योंकि “View Source” से कोई भी देख सकता है।

Example 6: Real-Life HTML File with Comments

<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8">
  <title>HTML Comments Example</title>
</head>
<body>

  <!-- 🧭 Navigation Bar -->
  <nav>
    <a href="#">Home</a> |
    <a href="#">About</a> |
    <a href="#">Contact</a>
  </nav>

  <!-- 🧩 Main Content -->
  <section>
    <h2>HTML Comments का उपयोग</h2>
    <p>यह लेसन बताता है कि कोड में नोट्स कैसे लिखे जाते हैं।</p>
  </section>

  <!-- 📞 Footer Section -->
  <footer>
    <p>Made with ❤️ by CodeKeet</p>
  </footer>

</body>
</html>

यह पूरा HTML फाइल comments से साफ़-सुथरा और समझने में आसान है।

Real Use Cases

कोड समझाने के लिए
किसी सेक्शन को टेम्पररी बंद करने के लिए
टीम प्रोजेक्ट्स में नोट्स डालने के लिए
फाइल को साफ़ और readable रखने के लिए