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

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

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

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

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

साइट <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 में एओएम के इस स्क्रीनशॉट में दिखाया गया है. इसमें <header> और <footer> के बीच <header> और <footer> के साथ <article> है.

इस स्क्रीनशॉट में दो फ़ुटर हैं: एक <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>

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

<main>

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

<aside>

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

<article>

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

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

<section>

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

जैसिंडा आर्डर्न के उदाहरण पर वापस आते हैं. अखबार के होम पेज पर मौजूद बैनर में, अखबार का नाम शामिल होगा. इसके बाद, एक <main> होगा, जिसे कई <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, हेडिंग के आधार पर आउटलाइन बना सकते हैं. हालांकि, ब्राउज़र ने इस स्ट्रक्चर को कभी लागू नहीं किया और आउटलाइन के लिए सुझाए गए एल्गोरिदम को एचटीएमएल स्पेसिफ़िकेशन से हटा दिया गया. पहले ब्राउज़र, सेक्शनिंग एलिमेंट में नेस्ट किए गए <h1> एलिमेंट को छोटे फ़ॉन्ट साइज़ में दिखाते थे. हालांकि, मॉडर्न ब्राउज़र ने उन डिफ़ॉल्ट स्टाइल को हटा दिया है. साथ ही, वे दस्तावेज़ की आउटलाइन अपने-आप बनाने की सुविधा के साथ काम नहीं करते.

अब आपके पास MachineLearningWorkshop.com की आउटलाइन बनाने के लिए ज़रूरी जानकारी है:

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

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

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

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

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

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