टाइटल और सेक्शन

पिछले सेक्शन में आपने सीखा कि अगर आपको किसी पेज पर मौजूद शब्दों का मतलब नहीं पता है, तब भी सिमैंटिक एलिमेंट की मदद से दस्तावेज़ को सही स्ट्रक्चर दिया जा सकता है. इससे सर्च इंजन, सहायता करने वाली टेक्नोलॉजी, रखरखाव करने वाला व्यक्ति, और टीम का नया सदस्य दस्तावेज़ की खास जानकारी को समझ पाएगा.

इस सेक्शन में, आपको दस्तावेज़ के स्ट्रक्चर के बारे में जानकारी मिलेगी. साथ ही, पिछले सेक्शन में बताए गए सेक्शनिंग एलिमेंट के बारे में फिर से बताया जाएगा. इसके अलावा, आपको अपने आवेदन के लिए आउटलाइन मार्क अप करने का तरीका भी बताया जाएगा.

कोडिंग करते समय सही एलिमेंट चुनने का मतलब है कि आपको अपने एचटीएमएल को फिर से फ़ैक्टर करने या उस पर टिप्पणी करने की ज़रूरत नहीं होगी. अगर आपको किसी काम के लिए सही एलिमेंट का इस्तेमाल करना है, तो ज़्यादातर मामलों में आपको सही एलिमेंट चुनने में मदद मिलेगी. अगर ऐसा नहीं किया जाता है, तो शायद आपको यह सुविधा न मिले.

अब जब आपको मार्कअप सिमैंटिक के बारे में पता है और आपको यह भी पता है कि सही एलिमेंट चुनना क्यों ज़रूरी है, तो सभी अलग-अलग एलिमेंट के बारे में जानने के बाद, आम तौर पर आपको सही एलिमेंट चुनने में ज़्यादा मेहनत नहीं करनी पड़ेगी.

साइट <header>

सबसे पहले, आपको साइट हेडर बनाना चाहिए. इसकी शुरुआत नॉन-सिमेंटिक मार्कअप से करें. इसके बाद, एक अच्छा समाधान तैयार करें, ताकि आपको एचटीएमएल सेक्शन और हेडिंग एलिमेंट के फ़ायदों के बारे में पता चल सके.

अगर आपने हमारे हेडर के सिमैंटिक पर ध्यान नहीं दिया है, तो हो सकता है कि आपने इस तरह के कोड का इस्तेमाल किया हो:

<!-- start header -->
<div id="pageHeader">
  <div id="title">Machine Learning Workshop</div>
  <!-- navigation -->
  <div id="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

सीएसएस की मदद से, किसी भी मार्कअप को सही तरीके से दिखाया जा सकता है. हालांकि, हर चीज़ के लिए नॉन-सिमैंटिक <div> का इस्तेमाल करने से, काम बढ़ जाता है. सीएसएस की मदद से कई <div> को टारगेट करने के लिए, कॉन्टेंट की पहचान करने के लिए आईडी या क्लास का इस्तेमाल किया जाता है. कोड में हर क्लोज़िंग </div> के लिए एक टिप्पणी भी शामिल होती है. इससे यह पता चलता है कि हर </div> ने कौनसा ओपनिंग टैग बंद किया.

id और class एट्रिब्यूट, स्टाइलिंग और JavaScript के लिए हुक उपलब्ध कराते हैं. हालांकि, ये स्क्रीन रीडर और (ज़्यादातर मामलों में) सर्च इंजन के लिए कोई सिमैंटिक वैल्यू नहीं जोड़ते.

स्क्रीन रीडर के लिए बेहतर ऐक्सेसिबिलिटी ऑब्जेक्ट मॉडल (एओएम) बनाने के लिए, role एट्रिब्यूट शामिल किए जा सकते हैं, ताकि सिमैंटिक उपलब्ध कराया जा सके:

<!-- start header -->
<div role="banner">
  <div role="heading" aria-level="1">Machine Learning Workshop</div>
  <div role="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

इससे कम से कम सिमैंटिक्स मिलता है और सीएसएस में एट्रिब्यूट सिलेक्टर का इस्तेमाल किया जा सकता है. हालांकि, इससे यह पता लगाने के लिए टिप्पणियां जोड़ी जाती हैं कि कौनसी <div>, हर </div> को बंद करती है.

अगर आपको एचटीएमएल के बारे में जानकारी है, तो आपको सिर्फ़ कॉन्टेंट के मकसद के बारे में सोचना है. इसके बाद, इस कोड को सिमैंटिक तरीके से लिखा जा सकता है. इसके लिए, आपको role का इस्तेमाल करने की ज़रूरत नहीं है. साथ ही, क्लोज़िंग टैग के बारे में टिप्पणी करने की भी ज़रूरत नहीं है:

<header>
  <h1>Machine Learning Workshop</h1>
  <nav>
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </nav>
</header>

इस कोड में दो सिमैंटिक लैंडमार्क का इस्तेमाल किया गया है: <header> और <nav>.

यह मुख्य हेडर है. <header> एलिमेंट हमेशा लैंडमार्क नहीं होता. यह जिस जगह पर नेस्ट किया गया है उसके आधार पर, इसके अलग-अलग सिमैंटिक होते हैं. जब <header> टॉप लेवल पर होता है, तो यह साइट banner होती है. यह एक लैंडमार्क भूमिका होती है. आपने इसे role कोड ब्लॉक में देखा होगा. जब <header> को <main>, <article> या <section> में नेस्ट किया जाता है, तो यह सिर्फ़ उस सेक्शन के हेडर के तौर पर काम करता है. यह लैंडमार्क नहीं होता.

<nav> एलिमेंट, कॉन्टेंट को नेविगेशन के तौर पर पहचानता है. यह <nav>, साइट के हेडिंग में नेस्ट किया गया है. इसलिए, यह साइट के लिए मुख्य नेविगेशन है. अगर इसे <article> या <section> में नेस्ट किया गया होता, तो यह सिर्फ़ उस सेक्शन के लिए इंटरनल नेविगेशन होता. सिमैंटिक एलिमेंट का इस्तेमाल करके, आपने एक काम का ऐक्सेसिबिलिटी ऑब्जेक्ट मॉडल या एओएम बनाया है. एओएम की मदद से, स्क्रीन रीडर उपयोगकर्ता को यह सूचना दे पाता है कि इस सेक्शन में एक मुख्य नेविगेशन ब्लॉक शामिल है. उपयोगकर्ता या तो इसके ज़रिए नेविगेट कर सकता है या इसे स्किप कर सकता है.

</nav> और </header> क्लोज़िंग टैग का इस्तेमाल करने से, यह बताने के लिए टिप्पणियों की ज़रूरत नहीं होती कि हर एंड टैग ने किस एलिमेंट को बंद किया. इसके अलावा, अलग-अलग एलिमेंट के लिए अलग-अलग टैग का इस्तेमाल करने से, id और class हुक की ज़रूरत नहीं पड़ती. सीएसएस सिलेक्टर में स्पेसिफ़िसिटी कम हो सकती है. इसलिए, आपको शायद टकराव की चिंता किए बिना header nav a का इस्तेमाल करके लिंक को टारगेट करना पड़े.

आपने बहुत कम एचटीएमएल वाला हेडर लिखा है. इसमें कोई क्लास या आईडी नहीं है. सिमैंटिक एचटीएमएल का इस्तेमाल करते समय, आपको ऐसा करने की ज़रूरत नहीं होती.

साइट <footer>

साइट के फ़ुटर को कोड करें.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>

<header> की तरह ही, फ़ुटर लैंडमार्क है या नहीं, यह इस बात पर निर्भर करता है कि फ़ुटर कहां नेस्ट किया गया है. साइट के फ़ुटर के तौर पर इस्तेमाल किए जाने पर, यह एक लैंडमार्क होता है. इसमें साइट के फ़ुटर की वह जानकारी होनी चाहिए जो आपको हर पेज पर दिखानी है. जैसे, कॉपीराइट स्टेटमेंट, संपर्क जानकारी, और निजता और कुकी नीतियों के लिंक. साइट के फ़ुटर के लिए इंप्लिसिट role, contentinfo है. इसके अलावा, फ़ुटर की कोई भूमिका नहीं होती और यह लैंडमार्क नहीं होता. जैसा कि Chrome में AOM के इस स्क्रीनशॉट में दिखाया गया है. इसमें <article> के साथ <header> और <footer> के बीच <header> और <footer> है.

इस स्क्रीनशॉट में दो फ़ुटर हैं: एक <article> में है और दूसरा टॉप लेवल पर है. टॉप लेवल का फ़ुटर, contentinfo की भूमिका वाला लैंडमार्क है. दूसरा फ़ुटर, लैंडमार्क नहीं है. Chrome इसे FooterAsNonLandmark के तौर पर दिखाता है; Firefox इसे section के तौर पर दिखाता है.

इसका मतलब यह नहीं है कि आपको <footer> का इस्तेमाल नहीं करना चाहिए. उदाहरण के लिए, अगर आपके पास कोई ब्लॉग है, तो आपके पास साइट फ़ुटर हो सकता है, जिसमें contentinfo की भूमिका होती है. हर ब्लॉग पोस्ट में <footer> भी हो सकता है. आपके ब्लॉग के मुख्य लैंडिंग पेज पर, ब्राउज़र, सर्च इंजन, और स्क्रीन रीडर को पता होता है कि मुख्य फ़ुटर, टॉप-लेवल का फ़ुटर है. साथ ही, अन्य सभी फ़ुटर उन पोस्ट से जुड़े होते हैं जिनमें उन्हें नेस्ट किया गया है.

जब कोई <footer>, <article>, <aside>, <main>, <nav> या <section> का डिसेंडेंट होता है, तो वह लैंडमार्क नहीं होता. अगर पोस्ट अपने-आप दिखती है, तो मार्कअप के आधार पर उस फ़ुटर का प्रमोशन किया जा सकता है.

फ़ुटर में अक्सर संपर्क जानकारी होती है. इसे <address>, संपर्क पता एलिमेंट में रैप किया जाता है. यह एक ऐसा एलिमेंट है जिसका नाम सही तरीके से नहीं दिया गया है. इसका इस्तेमाल, व्यक्तियों या संगठनों की संपर्क जानकारी को शामिल करने के लिए किया जाता है, न कि डाक पते के लिए.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
  <address>Instructors: <a href="/hal.html">Hal</a> and <a href="/eve.html">Eve</a></address>
</footer>

दस्तावेज़ का स्ट्रक्चर

यह मॉड्यूल <header> और <footer> से शुरू होता है, क्योंकि ये कभी-कभी ही लैंडमार्क (या "सेक्शनिंग") एलिमेंट होते हैं. सेक्शन बनाने के लिए, कई अन्य एलिमेंट भी उपलब्ध हैं.

हेडर, दो साइडबार, और फ़ुटर वाले लेआउट को होली ग्रेल लेआउट कहा जाता है. इस कॉन्टेंट को मार्क अप करने के कई तरीके हैं. इनमें ये शामिल हैं:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

अगर आपको कोई ब्लॉग बनाना है, तो आपके पास <main> में लेखों की एक सीरीज़ हो सकती है:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>
    <article>First post</article>
    <article>Second post</article>
  </main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

सिमैंटिक एलिमेंट का इस्तेमाल करने पर, ब्राउज़र सुलभता ट्री बना सकते हैं. इससे स्क्रीन रीडर को नेविगेट करने में मदद मिलती है. यहां, साइट <header> और <footer> के ज़रिए banner और contentinfo उपलब्ध कराए गए हैं. यहां जोड़े गए नए एलिमेंट में <main>, <aside>, और <article> शामिल हैं. साथ ही, <h1> और <nav> भी शामिल हैं जिनका इस्तेमाल आपने पहले किया था. इसके अलावा, <section> भी शामिल है जिसका इस्तेमाल आपने अब तक नहीं किया है.

<main>

इसमें एक <main> लैंडमार्क एलिमेंट है. <main> एलिमेंट, दस्तावेज़ के मुख्य कॉन्टेंट की पहचान करता है. हर पेज पर सिर्फ़ एक <main> होना चाहिए.

<aside>

<aside> का इस्तेमाल ऐसे कॉन्टेंट के लिए किया जाता है जो दस्तावेज़ के मुख्य कॉन्टेंट से सीधे तौर पर नहीं, बल्कि किसी और तरीके से जुड़ा होता है. उदाहरण के लिए, यह दस्तावेज़ एचटीएमएल के बारे में है. तीन साइट हेडर के उदाहरणों (डिव, भूमिका, और सिमैंटिक) के लिए सीएसएस सिलेक्टर स्पेसिफ़िसिटी वाले सेक्शन के लिए, <aside> में कुछ और जानकारी शामिल की जा सकती है. साथ ही, ज़्यादातर <aside> को साइडबार या कॉल-आउट बॉक्स में दिखाया जाता है. <aside> एक लैंडमार्क भी है, जिसकी भूमिका complementary की होती है.

<article>

<main> में हमने दो <article> एलिमेंट जोड़े हैं. पहले उदाहरण में इसकी ज़रूरत नहीं थी, क्योंकि मुख्य कॉन्टेंट सिर्फ़ एक शब्द था. असल दुनिया में, यह कॉन्टेंट का एक सेक्शन होता है. हालांकि, अगर आपको ब्लॉग लिखना है, जैसा कि हमारे दूसरे उदाहरण में दिखाया गया है, तो हर पोस्ट को <main> में नेस्ट किए गए <article> में होना चाहिए.

<article>, कॉन्टेंट के किसी ऐसे सेक्शन को दिखाता है जो पूरा या अपने-आप में एक इकाई होता है. सिद्धांत के तौर पर, इसका इस्तेमाल स्वतंत्र रूप से किया जा सकता है. किसी लेख को अखबार में छपे लेख की तरह समझें. प्रिंट में, न्यूज़ीलैंड की प्रधानमंत्री जैसिंडा अर्डर्न के बारे में कोई समाचार रिपोर्ट सिर्फ़ एक सेक्शन में दिख सकती है. जैसे, दुनिया की खबरें. अख़बार की वेबसाइट पर, वही समाचार लेख होम पेज, राजनीति सेक्शन, ओशियाना या एशिया पैसिफ़िक के समाचार सेक्शन में दिख सकता है. इसके अलावा, समाचार के विषय के आधार पर, खेल-कूद, लाइफ़स्टाइल या टेक्नोलॉजी सेक्शन में भी दिख सकता है. यह लेख, Pocket या Yahoo News! जैसी अन्य साइटों पर भी दिख सकता है!

<section>

<section> एलिमेंट का इस्तेमाल, किसी दस्तावेज़ के सामान्य स्टैंडअलोन सेक्शन को शामिल करने के लिए किया जाता है. ऐसा तब किया जाता है, जब इस्तेमाल करने के लिए कोई ज़्यादा खास सिमैंटिक एलिमेंट न हो. सेक्शन में हेडिंग होनी चाहिए. हालांकि, कुछ मामलों में ऐसा नहीं होता.

जैसिंडा अर्डर्न के उदाहरण पर वापस आते हैं. अख़बार के होम पेज पर, बैनर में अख़बार का नाम शामिल होगा. इसके बाद, एक <main> होगा, जिसे कई <section> में बांटा गया होगा. हर <section> में एक हेडर होगा, जैसे कि "दुनिया की खबरें" और "राजनीति". हर सेक्शन में आपको कई <article> दिखेंगे. हर <article> में, आपको एक या उससे ज़्यादा <section> एलिमेंट भी दिख सकते हैं. इस पेज पर, "हेडर और सेक्शन" वाला पूरा हिस्सा <article> है. इस <article> को कई <section> में बांटा गया है. इनमें site header, site footer, और दस्तावेज़ का स्ट्रक्चर शामिल है. लेख के साथ-साथ हर सेक्शन का भी एक हेडर होता है.

<section> तब तक लैंडमार्क नहीं होता, जब तक उसका नाम ऐक्सेस न किया जा सके. अगर उसका नाम ऐक्सेस किया जा सकता है, तो उसकी भूमिका region होती है. लैंडमार्क भूमिकाओं का इस्तेमाल कम से कम करना चाहिए, ताकि दस्तावेज़ के बड़े सेक्शन की पहचान की जा सके. बहुत ज़्यादा लैंडमार्क रोल का इस्तेमाल करने से, स्क्रीन रीडर में "नॉइज़" आ सकती है. इससे पेज के पूरे लेआउट को समझना मुश्किल हो जाता है. अगर आपके <main> में दो या तीन अहम सब-सेक्शन शामिल हैं, तो हर <section> के लिए ऐक्सेस किया जा सकने वाला नाम शामिल करना फ़ायदेमंद हो सकता है.

हेडिंग: <h1>-<h6>

सेक्शन हेडिंग के छह एलिमेंट होते हैं: <h1>, <h2>, <h3>, <h4>, <h5>, और <h6>. इनमें से हर एक, सेक्शन हेडिंग के छह लेवल में से किसी एक को दिखाता है. इनमें <h1> सबसे ज़्यादा या सबसे ज़रूरी सेक्शन लेवल होता है और <h6> सबसे कम.

जब किसी हेडिंग को दस्तावेज़ के बैनर <header> में नेस्ट किया जाता है, तो वह ऐप्लिकेशन या साइट के लिए हेडिंग होती है. <main> में नेस्ट किए जाने पर, यह उस पेज का हेडर होता है, न कि पूरी साइट का. भले ही, इसे <main> में <header> में नेस्ट किया गया हो या नहीं. <article> या <section> में नेस्ट किए जाने पर, यह पेज के उस सब-सेक्शन का हेडर होता है.

हमारा सुझाव है कि हेडिंग लेवल का इस्तेमाल, टेक्स्ट एडिटर में हेडिंग लेवल के इस्तेमाल की तरह ही करें: मुख्य हेडिंग के तौर पर <h1> से शुरू करें. इसके बाद, सब-सेक्शन के लिए हेडिंग के तौर पर <h2> का इस्तेमाल करें. अगर उन सब-सेक्शन में सेक्शन हैं, तो <h3> का इस्तेमाल करें. हेडिंग लेवल को स्किप न करें. यहां सेक्शन के हेडिंग के बारे में एक अच्छा लेख दिया गया है.

स्क्रीन रीडर का इस्तेमाल करने वाले कुछ लोग, पेज के कॉन्टेंट को समझने के लिए हेडिंग ऐक्सेस करते हैं. असल में, हेडिंग का इस्तेमाल किसी दस्तावेज़ की आउटलाइन बनाने के लिए किया जाता था. जैसे, MS Word या Google Docs, हेडिंग के आधार पर आउटलाइन बना सकते हैं. हालांकि, ब्राउज़र ने कभी इस स्ट्रक्चर को लागू नहीं किया. ब्राउज़र, नेस्ट की गई हेडिंग को छोटे फ़ॉन्ट साइज़ में दिखाते हैं. जैसा कि यहां दिए गए उदाहरण में दिखाया गया है. हालांकि, वे आउटलाइन बनाने की सुविधा के साथ काम नहीं करते.

अब आपके पास MachineLearningWorkshop.com के बारे में काफ़ी जानकारी है:

MLW.com के <body> के बारे में जानकारी

मशीन लर्निंग वर्कशॉप की साइट पर दिखने वाले कॉन्टेंट की खास जानकारी यहां दी गई है:

कोई भी कॉन्टेंट अपने-आप में पूरा नहीं होता है. इसलिए, <article> के बजाय <section> का इस्तेमाल करना ज़्यादा सही है. हालांकि, हर कॉन्टेंट में हेडिंग होती है, लेकिन कोई भी सेक्शन <footer> के लायक नहीं होता.

इस बारे में बताने की ज़रूरत नहीं है, लेकिन टेक्स्ट को बोल्ड या बड़ा करने के लिए हेडिंग का इस्तेमाल न करें. इसके बजाय, सीएसएस का इस्तेमाल करें. अगर आपको टेक्स्ट पर ज़ोर देना है, तो इसके लिए भी सिमैंटिक एलिमेंट मौजूद हैं. हम इस बारे में जानकारी देंगे और पेज के ज़्यादातर कॉन्टेंट को भरेंगे. ऐसा हम टेक्स्ट की बुनियादी बातों के बारे में बताते समय करेंगे. इसके बाद, हम एट्रिब्यूट के बारे में ज़्यादा जानकारी देंगे.

देखें कि आपको कितना समझ आया

हेडिंग और सेक्शन के बारे में अपनी जानकारी को परखें.