HTML Elements
इस अध्याय में आप HTML के Elements को गहराई से समझेंगे। Element वेबपेज की मूल इकाई है — ये एक टैग, उसका कंटेंट और उसकी संरचना का समूह होता है। यहां आप सीखेंगे कि HTML Elements क्या होते हैं, कितने प्रकार के होते हैं, और उन्हें कैसे सही तरीके से उपयोग किया जाता है।
🔍 HTML Element क्या होता है?
HTML Element का मतलब है:
- Opening Tag
- Content (वैकल्पिक)
- Closing Tag
✅ उदाहरण:
<p>यह एक पैराग्राफ है।</p>यहाँ <p> Opening Tag है, "यह एक पैराग्राफ है।" Content है, और </p> Closing Tag है। ये तीनों मिलकर एक HTML Element बनाते हैं।
🧱 HTML Elements के प्रकार
HTML Elements मुख्य रूप से दो प्रकार के होते हैं:
| प्रकार | विवरण |
|---|---|
| ✅ Block-level Elements | पूरे लाइन को घेरते हैं, और नए लाइन से शुरू होते हैं |
| ✅ Inline Elements | केवल उतने हिस्से में जगह लेते हैं जितनी ज़रूरत होती है |
🔷 Block-level Elements
Block Elements अपने ऊपर और नीचे स्वतः नई लाइन बनाते हैं और पूरे row को घेरते हैं।
📌 सामान्य Block Elements:
<h1>...</h1>
<p>...</p>
<div>...</div>
<section>...</section>
<header>...</header>
<footer>...</footer>
🔎 उदाहरण:
<div>
<h2>मेरा सेक्शन</h2>
<p>यह एक पैराग्राफ है।</p>
</div>
🔸 Inline Elements
Inline Elements केवल अपने कंटेंट जितनी जगह लेते हैं और लाइन ब्रेक नहीं करते।
📌 सामान्य Inline Elements:
<span>...</span>
<a href="#">...</a>
<strong>...</strong>
<em>...</em>
<img src="..." />
🔎 उदाहरण:
<p>यह एक <strong>Bold</strong> शब्द है।</p>
🧹 Empty Elements (खाली एलिमेंट्स)
ऐसे Elements जिनका कोई कंटेंट नहीं होता — इन्हें Self-closing Tags भी कहा जाता है।
✅ उदाहरण:
<br>
<hr>
<img src="image.jpg" alt="Image">
<input type="text">
नोट: HTML5 में self-closing tags को / के साथ लिखना जरूरी नहीं है:
<br>
<!-- भी मान्य है -->
<br />
<!-- भी मान्य है -->
🧩 Nesting of Elements
HTML में टैग्स को सही क्रम में Nest करना आवश्यक होता है।
❌ गलत Nesting:
<p><strong>यह Bold है</p></strong>
✅ सही Nesting:
<p><strong>यह Bold है</strong></p>
नियम:
- Inner Element को पहले बंद करें, फिर Outer को
- HTML Nesting strict hierarchy फॉलो करता है
🧪 HTML Element vs HTML Tag
| तत्व | उदाहरण | कार्य |
|---|---|---|
| Tag | <p> या </p> | केवल टुकड़ा (कोड का) होता है |
| Element | <p>Text</p> | टैग + कंटेंट + क्लोजिंग — पूरा स्ट्रक्चर ✅ |
🎯 HTML Semantic Elements
Semantic Elements ऐसे Block Elements होते हैं जिनके नाम से ही उनके उपयोग का पता चलता है:
| Semantic Tag | उपयोग |
|---|---|
<header> | पेज या सेक्शन का शीर्षक भाग |
<footer> | अंत का भाग |
<article> | स्वतंत्र कंटेंट |
<section> | एक सेक्शन |
<nav> | नेविगेशन लिंक |
✅ निष्कर्ष (Conclusion)
HTML Elements वेबसाइट की नींव होते हैं। Block और Inline Elements को समझना, सही Nesting करना और Empty Elements का उपयोग करना आपकी HTML स्किल को मजबूत करता है। Semantic Elements आपकी वेबसाइट को SEO और Accessibility के लिहाज़ से बेहतर बनाते हैं।