हेडिंग्स और पैराग्राफ्स
आज हम headings और paragraphs देखते हैं — पेज की रूपरेखा और पढ़ने वाला टेक्स्ट: एक मुख्य टाइटल, उसके नीचे सेक्शन टाइटल, और वे paragraphs जो लोग सच में पढ़ते हैं।
- 1
Headings और paragraphs
पिछले लेसन में हमने tag पर attributes से extra बातें लगाईं। आज हम वह टेक्स्ट लिखते हैं जो लोग सच में पढ़ते हैं। पेज को साफ़ टाइटल चाहिए, उसके नीचे सेक्शन टाइटल, और वाक्यों के paragraphs। यही headings और paragraphs हैं।
Headings
<h1>से<h6>तक होते हैं। Paragraphs<p>से बनते हैं। नीचे उदाहरण में एकh1, एकh2, और एक paragraph दिखेगा। - 2
समस्या: बिना हेडिंग के टेक्स्ट का जंगल और पढ़ने में परेशानी
अगर पेज की हर लाइन एक जैसी लगे, तो कोई नहीं बता सकता कि टॉपिक क्या है और नया सेक्शन कहाँ शुरू होता है। अखबार इसे बड़े हेडलाइन, छोटे सेक्शन टाइटल, और फिर paragraphs की खबर से सुलझाता है।
HTML भी वही काम signs से करता है।
<h1>पूरे पेज का मुख्य टाइटल है।<h2>उसके नीचे का सेक्शन है।<p>वाक्यों का ब्लॉक पकड़े रहता है। Browser और assistive tools इसी outline को follow करते हैं। - 3
Browser और Screen Readers हेडिंग आउटलाइन कैसे पढ़ते हैं
Browser headings को default में बड़ा दिखाता है, और हर paragraph के आसपास स्पेस लगाता है। दिखने से ज़्यादा मतलब मायने रखता है: पूरे पेज के लिए एक
h1, फिरh2, ज़रूरत हो तोh3। सिर्फ़ साइज़ बदलने के लिएh1से सीधेh4पर मत कूदना। साइज़ CSS का काम है। क्रम HTML का है।Paragraph के अंदर कभी नई लाइन चाहिए, बिना नया paragraph शुरू किए। उसके लिए
<br>है। यह empty element है, जैसे पहले वाला<hr>। उदाहरण में दूसरी लाइन<br>की वजह से नई पंक्ति से शुरू होती है। - 4
आज की प्रैक्टिस: एक व्यवस्थित आर्टिकल का ढांचा
नीचे छोटा गाइड एक बार पढ़ो, फिर browser pane देखो। वही outline है: टाइटल, सेक्शन, paragraph।
- 5
अहम नियम: हेडिंग्स सिर्फ़ संरचना के लिए हैं, साइज़ के लिए नहीं
Heading को paragraph के अंदर मत डालो। दोनों अलग-अलग टुकड़े हैं, एक-दूसरे के बगल में। और सिर्फ़ बड़ा बोल्ड टेक्स्ट चाहिए इसलिए
h1मत लगाओ। बिना नए सेक्शन के बड़ा टेक्स्ट चाहिए हो तो वह बाद में CSS का काम है।
यह पेज की विषय-सूची (Table of Contents) बनाता है। Search engines और स्क्रीन रीडर्स इसी क्रम से पेज समझते हैं। कभी भी स्तर मत छोड़ो (जैसे h1 के बाद सीधे h4)।
मुख्य सामग्री पैराग्राफ में रहती है। <br> का प्रयोग सिर्फ़ एक ही विचार में पंक्ति तोड़ने के लिए करें (जैसे पता या कविता), पैराग्राफ गैप बनाने के लिए नहीं।
आप क्या सीखेंगे
- 1Headings h1–h6 पेज की outline हैं
- 2मुख्य टाइटल के लिए एक h1
- 3पढ़ने वाला टेक्स्ट p से आता है
- 4br उसी paragraph के अंदर नई लाइन बनाता है
- 5साइज़ के लिए heading levels मत स्किप करो
लाइन-बाय-लाइन
<h1>Train Ticket Guide</h1>पूरे पेज का मुख्य टाइटल। Best practice: पेज पर एक ही
h1।<h2>How to book a seat</h2>h1के नीचे सेक्शन टाइटल। आगे छोटा टाइटल चाहिए तोh3लगाओ, सीधेh4पर मत कूदना।<p> ... </p>Paragraph element। वाक्यों का एक ब्लॉक। Browser इसके ऊपर-नीचे स्पेस खुद लगाता है।
<br>Empty element जो उसी paragraph के अंदर नई लाइन शुरू करता है। यह नया
<p>नहीं है। नया paragraph अलग टुकड़ा होता है, अपनी स्पेसिंग के साथ।
खुद ट्राई करो
अपने शौक पर एक छोटा पेज लिखो: एक <h1> शौक के नाम का, एक <h2> क्यों पसंद है, और दो <p>। दूसरे paragraph में एक बार <br> लगाओ।
हिंट: Heading को paragraph के अंदर मत डालो। दोनों अलग elements रहें।
गलती कहाँ होती है
- 1.सिर्फ़ बड़ा बोल्ड टेक्स्ट चाहिए इसलिए
<h1>लगाना। Heading ढांचा है। साइज़ CSS का काम है। - 2.Levels स्किप करना, जैसे
h1के बादh4। Outline क्रम में रखो:h1→h2→h3।
इंटरव्यू की तैयारी (क्लिक करके उत्तर देखें)
Q: एक सुलभ वेबपेज पर कितने <h1> tags होने चाहिए?↓
SEO और Web Accessibility के मानक अनुसार हर पेज पर सिर्फ़ एक ही <h1> होना चाहिए जो पूरे दस्तावेज़ के मुख्य विषय को दर्शाए। उसके उप-खंडों के लिए <h2> और <h3> का प्रयोग करें।
Q: <br> और नए <p> में क्या अर्थपूर्ण अंतर है?↓
<p> एक नया पैराग्राफ बनाता है जिसमें डिफ़ॉल्ट मार्जिन और संरचनात्मक अलगाव होता है। <br> उसी पैराग्राफ के अंदर बिना नया ब्लॉक बनाए सिर्फ़ एक लाइन ब्रेक देता है (जैसे पता या शायरी)।
Q: हेडिंग लेवल्स को बीच में छोड़ना (जैसे h1 के बाद सीधे h4) ग़लत क्यों माना जाता है?↓
हेडिंग्स पेज की आउटलाइन तय करती हैं। दृष्टिबाधित उपयोगकर्ताओं के स्क्रीन रीडर्स इसी क्रम के आधार पर नेविगेशन मेन्यू बनाते हैं। लेवल्स कूदने से दस्तावेज़ का क्रम टूट जाता है। साइज़ छोटा-बड़ा करने के लिए CSS का इस्तेमाल करें, गलत हेडिंग टैग का नहीं।