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

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

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

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

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

साइट <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 के इस स्क्रीनशॉट में दिखाया गया है. इस स्क्रीनशॉट में <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> ऐसे कॉन्टेंट के लिए है जो दस्तावेज़ के मुख्य कॉन्टेंट से सीधे तौर पर या ऊपरी तौर पर जुड़ा हो. उदाहरण के लिए, यह लेख एचटीएमएल के बारे में है. तीन साइट हेडर उदाहरणों (डिव, रोल, और सिमैंटिक) के लिए सीएसएस सिलेक्टर की खासियत के किसी सेक्शन के लिए, ऊपरी तौर पर मिलते-जुलते साइड को <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> की रूपरेखा तैयार करना

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

ध्यान दें: इस कोड स्निपेट में सिर्फ़ <body> का कॉन्टेंट शामिल है. <!doctype>, <html>, <body>, और मुख्य जानकारी पहले कवर की गई थी.

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

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

जांचें कि आपको कितना समझ आया

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

आपकी साइट के किस हिस्से में साइट का लोगो या टाइटल और मुख्य नेविगेशन शामिल है, यह दिखाने के लिए एलिमेंट का इस्तेमाल किया जाता है.

<heading>

फिर से कोशिश करें.

<header>

सही जवाब!

<title>

फिर से कोशिश करें.

एक पेज पर कितने <main> एलिमेंट की अनुमति है?

एक.

सही जवाब!

कोई नहीं. यह एलिमेंट मान्य नहीं है.

फिर से कोशिश करें.

जब तक उपयोगकर्ताओं का नाम ऐक्सेस किया जा सके, तब तक अपने डेटा को आसानी से ऐक्सेस किया जा सकता है.

फिर से कोशिश करें.