सेमेंटिक HTML स्ट्रक्चर
आज हम semantic page landmarks देखते हैं — header, nav, main, और footer: टैग जो हर क्षेत्र का काम नाम से बताते हैं।
इस पाठ में आप क्या सीखेंगे
- 1Pages के नाम वाले regions होते हैं, सिर्फ़ div नहीं
- 2header ऊपर की पट्टी है
- 3nav में navigation links रहते हैं
- 4main मुख्य content है
- 5footer पेज का निचला हिस्सा है
- 1
Semantic structure क्या है
पिछले लेसन में table cells मर्ज किए। आज पूरे page पर लौटते हैं। पेज में अक्सर ऊपर की पट्टी, कुछ links, मुख्य कहानी, और नीचे की लाइन होती है। इन क्षेत्रों को नाम चाहिए, सिर्फ़ खाली
divबॉक्स नहीं।Semantic tags काम का नाम बताते हैं: ऊपर के लिए
<header>, navigation links के लिए<nav>, मुख्य content के लिए<main>, और नीचे के लिए<footer>। - 2
समस्या: "Div Soup" और अर्थहीन डिब्बों का जाल
पुराने समय में वेबपेज दर्जनों
<div class="header">और<div class="nav">से भरे होते थे। Search engines और स्क्रीन रीडर्स के लिए ये सब डिब्बे एक जैसे और अर्थहीन थे—उन्हें पता ही नहीं चलता था कि मुख्य आर्टिकल कहाँ है।इसीलिए HTML5 ने स्पष्ट Landmark Tags पेश किए:
<header>,<nav>,<main>,<article>,<section>, और<footer>। ये दिखने में सामान्य ब्लॉक डिब्बों जैसे ही होते हैं, पर इनका उद्देश्य पूरी दुनिया के लिए साफ़ और पारदर्शी होता है। - 3
Browser, Screen Readers और Search Engines Landmarks को कैसे समझते हैं
नेत्रहीन उपयोगकर्ताओं के लिए Screen Reader सीधे
<main>पर कूदने का शॉर्टकट देते हैं, जिससे उन्हें बार-बार मेनू सुनने की ज़रूरत नहीं पड़ती।Google जैसे Search Engine सिमेंटिक संरचना देखकर समझ जाते हैं कि पेज का मुख्य कंटेंट क्या है, जिससे वेबसाइट की SEO रैंकिंग बेहतर होती है।
- 4
आज की प्रैक्टिस: Semantic Tags से बना व्यवस्थित वेबपेज
नीचे दिए गए कोड में देखें कि कैसे पूरे पेज का ढाँचा अलग-अलग सिमेंटिक कंटेनर्स में बँटा हुआ है, बिना किसी अनावश्यक
<div>के। - 5
अहम नियम: पहले Semantic Tags, Div केवल अंतिम विकल्प
Page के फ्रेम के लिए बेनाम
divके ढेर की जगह ये landmarks पसंद करो। दस्तावेज़ के मुख्य content के लिए एक ही<main>रखो।
ब्राउज़र और डेवलपर दोनों को अपने कंटेंट का स्पष्ट अर्थ बताते हैं। Accessibility और SEO के लिए अत्यंत आवश्यक।
इनका अपना कोई अर्थ या भूमिका नहीं होती। सिर्फ CSS स्टाइलिंग, लेआउट ग्रिड या फ्लेक्स बॉक्स बनाने के लिए इस्तेमाल होते हैं।
लाइन-बाय-लाइन
<header> ... </header>पेज का ऊपरी हिस्सा। यहाँ साइट टाइटल और navigation है।
<nav> ... </nav>Navigation links का landmark। मेनू और साइट links यहीं, बेतरतीब paragraphs नहीं।
<main> ... </main>इस दस्तावेज़ का मुख्य content। आमतौर पर पेज पर एक ही
main।<footer> ... </footer>पेज का निचला हिस्सा — credits, छोटी नोट, या बंद करने वाले links।
खुद ट्राई करो
<header>, <nav>, <main>, और <footer> वाला छोटा पेज बनाओ। Header में अपना नाम, main में एक वाक्य।
हिंट: फ्रेम के लिए landmark tags। उनके अंदर सामान्य content tags।
💡 समाधान देखें (यदि अटक गए हों)
<header>
<h1>राहुल की वेबसाइट</h1>
<nav>
<a href="#about">परिचय</a> | <a href="#contact">संपर्क</a>
</nav>
</header>
<main>
<h2>स्वागत है!</h2>
<p>मैंने आज सिमेंटिक HTML टैग्स का सही इस्तेमाल सीखा।</p>
</main>
<footer>
<p>© 2026 राहुल का पोर्टफोलियो</p>
</footer>क्या एक सामान्य वेबपेज पर एक से ज़्यादा <main> टैग्स दृश्य रूप से होने चाहिए?
गलती कहाँ होती है
- 1.पूरे पेज को “header” जैसी class वाले
divमें लपेटना,<header>इस्तेमाल न करना। - 2.एक पेज पर कई
<main>। मुख्य content का एक ही क्षेत्र रखो।
इंटरव्यू की तैयारी
Q: Semantic HTML का वास्तविक अर्थ क्या है?↓
ऐसे HTML टैग्स का इस्तेमाल करना जो सिर्फ़ डिज़ाइन दिखाने के बजाय अपने कंटेंट के अर्थ और उद्देश्य को स्पष्ट करें (जैसे <nav>, <article>, <footer>)।
Q: आम div की जगह <main> का उपयोग क्यों करना चाहिए?↓
<main> दस्तावेज़ के अद्वितीय मुख्य विषय को इंगित करता है। स्क्रीन रीडर्स उपयोगकर्ताओं को हेडर और साइडबार को छोड़ सीधे मुख्य सामग्री पर कूदने की सुविधा देते हैं।
Q: <nav> टैग में क्या रखा जाना चाहिए?↓
वे प्रमुख नेविगेशन लिंक्स और मेनू जो यूज़र को वेबसाइट या पेज के अलग-अलग हिस्सों में ले जाते हैं। हर लिंक को nav में नहीं रखा जाता, केवल मुख्य नेविगेशन ब्लॉक्स को।