सिमेंटिक HTML

docs.scrimba.com

दो पृष्ठ समान दिख सकते हैं लेकिन उनमें अलग तरीके से निर्मित हो सकते हैं। एक उन तत्वों का उपयोग करता है जिनका नाम वह रखते हैं: एक हेडर, एक नेविगेशन, एक मुख्य क्षेत्र। दूसरा सब कुछ एक ही अनाम बॉक्स में लपेटता है और उन्हें अलग करने के लिए क्लास नामों पर निर्भर करता है। स्क्रीन पर आप उन्हें अलग नहीं कर सकते। हर दूसरे संबंध में वे बिल्कुल अलग पृष्ठ हैं। तत्वों को उनके अर्थ के आधार पर चुनना ही सिमेंटिक HTML के बारे में है।

सिमेंटिक का अर्थ

सिमेंटिक का अर्थ है "अर्थ से संबंधित"। एक सिमेंटिक तत्व वह है जिसका नाम यह बताता है कि इसमें क्या है। एक पैराग्राफ <p> में जाता है क्योंकि यह एक पैराग्राफ है। एक नेविगेशन मेनू <nav> में जाता है क्योंकि यह नेविगेशन है। टैग का नाम चीज़ का नाम बताता है।

आप लगभग किसी भी पृष्ठ को एक बहुउद्देश्यीय बॉक्स से बना सकते हैं और इसे स्टाइलिंग के साथ सही दिखा सकते हैं। लेकिन तब पृष्ठ पर कुछ भी नहीं कहेगा कि यह क्या है। जिस तत्व का नाम सामग्री के नाम पर है उसे चुनना ऐसा है जैसे आप घर चलते समय बक्सों को लेबल कर रहे हों। सब कुछ अभी भी सादे बिना लेबल वाले बक्सों में फिट हो जाएगा, लेकिन लेबल वही है जो किसी और को, या ब्राउज़र को, यह समझने देता है कि हर एक को खोले बिना अंदर क्या है।

एक तत्व सिमेंटिक है जब इसका नाम इसकी सामग्री के अर्थ का वर्णन करता है, न कि सामग्री कैसी दिखती है। <nav>, <article>, और <button> सिमेंटिक हैं: वे आपको बताते हैं कि सामग्री किस लिए है। <div> और <span> नहीं हैं: वे सामान्य कंटेनर हैं जिनका स्वयं में कोई अर्थ नहीं है।

लाभ यह है कि अर्थ मार्कअप में रहता है, जहां अन्य उपकरण इसे पढ़ सकते हैं। एक ब्राउज़र जानता है कि <button> क्लिक करने योग्य है और कीबोर्ड के साथ फोकस करने योग्य है बिना आप कुछ जोड़े। एक स्क्रीन रीडर <nav> को एक नेविगेशन क्षेत्र के रूप में घोषित कर सकता है। सर्च इंजन <article> को स्वतंत्र सामग्री के एक हिस्से के रूप में मानते हैं। अगर तत्व एक स्टाइल <div> है तो कोई भी यह काम नहीं करता, क्योंकि <div> उस बारे में कोई वादा नहीं करता कि यह क्या रखता है।

सिमेंटिक्स एक तत्व के बीच का अंतर है जो अर्थ रखता है और जो केवल पिक्सल रखता है। जब आप <nav> लिखते हैं, तो आप केवल एक बॉक्स नहीं बना रहे हैं, आप दस्तावेज़ के बारे में एक तथ्य बता रहे हैं: यह क्षेत्र नेविगेशन है। यह तथ्य एक्सेसिबिलिटी ट्री में दर्ज किया जाता है (समानांतर संरचना जो ब्राउज़र DOM के साथ-साथ बनाता है, प्रत्येक तत्व की भूमिका और अवस्था का वर्णन करते हुए सहायक तकनीक के लिए), और यह वही है जिस पर दृश्यमान माउस उपयोगकर्ता के अलावा अन्य उपकरण कार्य करते हैं।

व्यावहारिक परीक्षा प्रतिस्थापन है। यदि आप एक तत्व को एक नंगे <div> से बदल दें और इसे समान दिखाने के लिए स्टाइल करें, तो आप क्या खोते हैं? <p> या सजावटी रैपर के लिए, कुछ भी अर्थपूर्ण नहीं। एक <button> के लिए, आप कीबोर्ड फोकस, Enter और Space कुंजी हैंडलिंग, और स्क्रीन रीडर के लिए "button" घोषणा खो देंगे, और आपको इसे सब कुछ हाथ से फिर से बनाना होगा। वह अंतराल सिमेंटिक्स है: व्यवहार और अर्थ जो ब्राउज़र आपको मुफ्त देता है क्योंकि तत्व के नाम ने इसे बताया कि सामग्री क्या है। नामित तत्व को चुनना स्टाइल पसंद नहीं है, यह सही व्यवहार पाने का सबसे सस्ता तरीका है।

Junoसिमेंटिक का अर्थ सिमेंटिक का अर्थ है कि टैग का नाम उसके अनुसार है जो वह रखता है: <p> में पैराग्राफ, <nav> में मेनू। आप सब कुछ सादे बॉक्स में डाल सकते हैं और इसे समान दिखा सकते हैं, लेकिन तब कुछ भी नहीं कहेगा कि यह क्या है। इसे अपने चलाने वाले बॉक्स को लेबल करने के बारे में सोचें ताकि कोई भी बता सके कि अंदर क्या है।

Junoसिमेंटिक का अर्थ एक सिमेंटिक तत्व अपने अर्थ का नाम रखता है, <div> कुछ भी नाम नहीं रखता। जीत यह है कि ब्राउज़र, स्क्रीन रीडर, और सर्च इंजन सभी अर्थ को सीधे मार्कअप से पढ़ सकते हैं। उस तत्व के लिए पहुंचें जो सामग्री का वर्णन करता है, और जब वास्तव में कुछ भी वर्णन करने के लिए नहीं होता है तो <div> को रखें।

Junoसिमेंटिक का अर्थ प्रतिस्थापन परीक्षा चलाएं: तत्व को एक स्टाइल <div> से बदलें और पूछें कि आपने क्या खोया। अगर उत्तर कीबोर्ड फोकस है, एक्सेसिबिलिटी ट्री में एक भूमिका, या स्क्रीन-रीडर घोषणा, यह सिमेंटिक्स है जो आप मुफ्त में प्राप्त कर रहे थे। इसे हाथ से फिर से बनाना हमेशा नामित तत्व का उपयोग करने की तुलना में अधिक काम होता है।

लैंडमार्क तत्व

कुछ तत्व पृष्ठ के बड़े क्षेत्रों को चिह्नित करने के लिए मौजूद हैं। ये वह हैं जिनके लिए आप पहले पहुंचते हैं:

• <header> एक पृष्ठ या एक सेक्शन के शीर्ष पर है: एक लोगो, एक शीर्षक, एक परिचय।
• <nav> नेविगेशन लिंक्स का एक सेट है, जैसे मुख्य मेनू।
• <main> मुख्य सामग्री है, जो पृष्ठ का कारण है।
• <section> संबंधित सामग्री का एक समूहित हिस्सा है, आमतौर पर इसका अपना शीर्षक होता है।
• <article> एक स्वतंत्र हिस्सा है जो अभी भी अपने आप पर अर्थपूर्ण होगा, जैसे एक ब्लॉग पोस्ट या समाचार कहानी।
• <aside> पक्ष की सामग्री है: संबंधित लिंक्स, एक नोट, एक विज्ञापन।
• <footer> एक पृष्ठ या सेक्शन के नीचे है: कॉपीराइट, संपर्क विवरण, छोटी प्रिंट।

नियम हर बार समान है। अगर एक क्षेत्र नेविगेशन है, तो यह <nav> में जाता है, <div> में नहीं। अगर यह पाद लेख है, तो यह <footer> में जाता है। आप क्षेत्र को उस तत्व के साथ नाम देते हैं जो इससे मेल खाता है।

<header>
  <h1>दिल्ली की रसोई</h1>
  <nav>
    <a href="/recipes">रेसिपीज़</a>
    <a href="/about">परिचय</a>
  </nav>
</header>
<main>
  <h2>सप्ताह की रातों का खाना</h2>
  <p>काम के बाद बनाने के लिए त्वरित भोजन।</p>
</main>
<footer>
  <p>दिल्ली में बनाया गया।</p>
</footer>

सात तत्व एक पृष्ठ को इसके प्रमुख क्षेत्रों में विभाजित करते हैं, और एक साथ उन्हें लैंडमार्क तत्व कहा जाता है क्योंकि प्रत्येक एक क्षेत्र को चिह्नित करता है जिसे एक पाठक या उपकरण नेविगेट कर सकते हैं:

• <header> अपने निकटतम कंटेनर का परिचय देता है: पृष्ठ के शीर्ष पर यह साइट ब्रांडिंग रखता है, <article> के अंदर यह उस आर्टिकल का शीर्षक और byline रखता है।
• <nav> नेविगेशन लिंक्स के एक ब्लॉक को लपेटता है। इसे महत्वपूर्ण लोगों के लिए उपयोग करें, मुख्य मेनू या विषय सूची, पृष्ठ पर हर आवारा लिंक के लिए नहीं।
• <main> दस्तावेज़ की प्राथमिक सामग्री रखता है, वह हिस्सा जो साइट भर में दोहराए जाने की तुलना में इस पृष्ठ के लिए अद्वितीय है।
• <section> संबंधित सामग्री को समूहीकृत करता है जो एक साथ संबंधित है, आमतौर पर एक शीर्षक द्वारा पेश किया जाता है।
• <article> एक पूर्ण, स्वतंत्र इकाई है: एक पोस्ट, एक टिप्पणी, एक उत्पाद कार्ड। परीक्षा यह है कि क्या इसे खींचा जाएगा और अपने आप पर दिखाया जाएगा तो अभी भी अर्थपूर्ण होगा।
• <aside> सामग्री रखता है जो इसे घेरने वाली चीजों के स्पर्शरेखीय है: एक साइडबार, एक पुल उद्धरण, संबंधित लिंक्स।
• <footer> अपने निकटतम कंटेनर को समापन सामग्री के साथ बंद करता है: लेखकत्व, लिंक्स, कानूनी पाठ।

मुख्य विचार यह है कि इनमें से अधिकांश संदर्भजन्य हैं। एक <header> और एक <footer> यह वर्णन करते हैं कि वे क्या अंदर बैठते हैं, तो एक एकल पृष्ठ कई हो सकते हैं, पृष्ठ के लिए एक जोड़ी और प्रत्येक <article> के लिए एक। <main> अपवाद है, अगले सेक्शन में कवर किया गया है।

<article>
  <header>
    <h2>भुनी हुई टमाटर का सूप</h2>
    <p>राज द्वारा, 20 मिनट</p>
  </header>
  <p>टमाटर को आधा करें और नरम होने तक भूनें।</p>
  <footer>
    <p>चार को परोसता है।</p>
  </footer>
</article>

सात क्षेत्र तत्व HTML लैंडमार्क हैं: ऐसे तत्व जो एक्सेसिबिलिटी ट्री में एक नेविगेट करने योग्य क्षेत्र को प्रदर्शित करते हैं। प्रत्येक एक भूमिका के लिए मानचित्र बनाता है जो सहायक तकनीक सूची बना सकती है और उसके बीच कूद सकती है, जो उन्हें स्रोत में सटीक दिखने से परे महत्वपूर्ण बनाता है।

• <header> पृष्ठ स्तर पर banner भूमिका के लिए मानचित्र बनाता है, लेकिन जब यह <article>, <aside>, <main>, <nav>, या <section> के अंदर नेस्ट किया जाता है तो नहीं, जहां यह केवल कोई लैंडमार्क भूमिका के बिना एक परिचयात्मक समूह है।
• <footer> उसे दर्पण करता है: पृष्ठ स्तर पर contentinfo, और एक सादा समूह जब उनमें से एक के अंदर नेस्ट किया जाता है।
• <nav> navigation भूमिका है। एक पृष्ठ आमतौर पर एक से अधिक होता है, एक प्राथमिक मेनू और एक पृष्ठ में सामग्री सूची, जहां नीचे लेबलिंग आती है।
• <main> main भूमिका है और प्राथमिक सामग्री को चिह्नित करता है। प्रति पृष्ठ एक है।
• <aside> complementary भूमिका है: सामग्री जो मुख्य सामग्री का समर्थन करती है लेकिन इससे अलग है।
• <section> एक region लैंडमार्क बन जाता है जब इसका एक सुलभ नाम होता है, आमतौर पर एक शीर्षक से बंधा; एक अनाम <section> कोई लैंडमार्क नहीं दिखाता है और एक्सेसिबिलिटी ट्री के लिए, <div> के करीब है।
• <article> article भूमिका रखता है, एक आत्मनिर्भर रचना, जिसे उपकरण गणना कर सकते हैं लेकिन अन्य के समान अर्थ में एक नेविगेशन लैंडमार्क नहीं है।

डिजाइन लक्ष्य एक दस्तावेज़ है जिसे एक गैर-दृश्य उपयोगकर्ता उतनी तेज़ी से सर्वेक्षण कर सकता है जितना एक दृश्य उपयोगकर्ता लेआउट को स्कैन करता है। एक स्क्रीन रीडर हर लैंडमार्क की एक सूची तैयार कर सकता है और उपयोगकर्ता को बीच की सामग्री सुने बिना "main" या "navigation" पर सीधे कूदने दे सकता है। यह केवल तभी काम करता है जब क्षेत्रों को वास्तविक लैंडमार्क तत्वों के साथ चिह्नित किया जाता है। दीवार-से-दीवार <div>s एक ऐसा दस्तावेज़ तैयार करते हैं जिसमें कोई लैंडमार्क नहीं है, तो इसके माध्यम से एकमात्र तरीका ऊपर से नीचे है।

<body>
  <header>            <!-- banner: पृष्ठ-स्तर -->
    <nav>...</nav>    <!-- navigation -->
  </header>
  <main>              <!-- main: एक प्राथमिक क्षेत्र -->
    <article>...</article>
    <aside>...</aside> <!-- complementary -->
  </main>
  <footer>...</footer> <!-- contentinfo: पृष्ठ-स्तर -->
</body>

Junoलैंडमार्क तत्व जानने योग्य सात क्षेत्र टैग हैं: <header>, <nav>, <main>, <section>, <article>, <aside>, और <footer>। प्रत्येक पृष्ठ के एक हिस्से का नाम रखता है, और आप वह चुनते हैं जो क्षेत्र से मेल खाता है जिसे आप बना रहे हैं। आपको उन्हें आज याद रखना नहीं है, वे बार-बार सामने आते हैं जब तक वे चिपक नहीं जाते।

Junoलैंडमार्क तत्व सात तत्व एक पृष्ठ को क्षेत्रों में विभाजित करते हैं, और उनमें से अधिकांश यह वर्णन करते हैं कि वे क्या बैठते हैं, तो <header> और <footer> एक से अधिक बार दिखाई दे सकते हैं। <article> परीक्षा जो मुझे बहुत सारे दूसरे अनुमान से बचाया: क्या यह अपने आप पर समझदारी होगी यदि आप इसे खींच लें? हाँ तो, यह एक आर्टिकल है; यदि यह एक शीर्षक के साथ एक समूहित हिस्सा है, तो यह एक सेक्शन है।

Junoलैंडमार्क तत्व ये लैंडमार्क हैं, और प्रत्येक एक भूमिका के लिए मानचित्र बनाता है जिसे एक स्क्रीन रीडर कूद सकता है, जो कि <div>s के ढेर को हराता है। दो पकड़ें जो रखने लायक हैं: <header> और <footer> केवल शीर्ष स्तर पर banner और contentinfo लैंडमार्क बन जाते हैं, और एक <section> केवल एक लैंडमार्क होता है जब इसका एक सुलभ नाम होता है। एक अनाम सेक्शन सहायक तकनीक के लिए मूल रूप से एक div है।

div और span, गैर-सिमेंटिक फॉलबैक

पृष्ठ के हर हिस्से का कोई अर्थ नहीं है जो नाम देने लायक है। कभी-कभी आपको केवल चीजों को समूहीकृत करने के लिए एक बॉक्स की आवश्यकता होती है ताकि आप उन्हें स्टाइल कर सकें, या कुछ शब्दों को लपेट सकें ताकि आप उन्हें रंग दे सकें। इसके लिए दो सादे तत्व हैं जिनका अपना कोई अर्थ नहीं है।

<div> एक सामान्य ब्लॉक है: एक खाली कंटेनर जिसका उपयोग आप तब करते हैं जब कोई अन्य तत्व फिट नहीं होता। <span> एक लाइन के अंदर एक छोटे पाठ के लिए समान विचार है। न तो अपनी सामग्री के बारे में कुछ कहता है। वे शुद्धता के लिए स्टाइलिंग और समूहीकरण के लिए हुक के रूप में मौजूद हैं।

<p>आज का कुल <span class="price">₹2100.00</span> है।</p>

<div class="card">
  <h2>विशेष ऑफर</h2>
  <p>सभी पास्ता पर दो के लिए एक।</p>
</div>

<span> एक मूल्य को लपेटता है ताकि आप इसे रंग दे सकें। <div> एक कार्ड को समूहीकृत करता है ताकि आप इसके चारों ओर एक सीमान्त डाल सकें। केवल इन तक पहुंचें जब कोई और अर्थपूर्ण फिट न हो, क्योंकि वे ब्राउज़र को अंदर क्या है इसके बारे में कुछ नहीं कहते हैं।

<div> और <span> दो तत्व हैं जिनका कोई अर्थ नहीं है, और यह बिल्कुल वही है जो वे हैं। एक <div> एक सामान्य ब्लॉक-स्तर कंटेनर है; एक <span> एक सामान्य इनलाइन है। आप उन्हें स्टाइलिंग हुक के रूप में उपयोग करते हैं: एक स्थान जहां आप एक क्लास या एक id को लटकाते हैं जब आपको सामग्री को समूहीकृत या लक्षित करने की आवश्यकता होती है लेकिन कुछ अर्थपूर्ण कहने के लिए कुछ नहीं होता है।

<div class="grid">
  <article class="card">...</article>
  <article class="card">...</article>
</div>

<div class="grid"> केवल कार्डों को एक ग्रिड में बाहर निकालने के लिए मौजूद है। यह एक प्रस्तुति कार्य है, एक अर्थपूर्ण नहीं, तो <div> सही विकल्प है, एक फॉलबैक नहीं है जिसके बारे में आप बुरा महसूस करें। गलती उलटा है: एक <div> का उपयोग कुछ के लिए जिसका अर्थ है। क्लिक करने योग्य <div> को <button> होना चाहिए, nav लिंक्स से भरा <div> को <nav> होना चाहिए, एक पूरी पोस्ट को लपेटने वाला <div> को <article> होना चाहिए। जब कोई अर्थ नहीं होता है, केवल एक लेआउट या स्टाइलिंग आवश्यकता, <div> और <span> सही उत्तर हैं।

<div> और <span> सिमेंटिकली खाली तत्व हैं: एक सामान्य ब्लॉक और एक सामान्य इनलाइन कंटेनर, क्रमशः, एक्सेसिबिलिटी ट्री में कोई भूमिका नहीं है और किसी उपकरण को कोई अर्थ नहीं है। वे एक कार्य के लिए सही विकल्प हैं, एक प्रस्तुति हुक: एक तत्व जो केवल स्टाइलिंग को संलग्न करने या बच्चों को लेआउट के लिए समूहीकृत करने के लिए मौजूद है, और जो कोई जानकारी ले जाता है जिसे एक स्क्रीन रीडर या सर्च इंजन को कभी घोषित करना चाहिए।

एक तत्व होने का मूल्य जिसका कोई अर्थ नहीं है यह है कि यह अर्थपूर्ण तत्वों को सच रखता है। एक ग्रिड रैपर, एक flexbox पंक्ति, एक पोजिशनिंग संदर्भ: ये वास्तविक आवश्यकताएं हैं जिनमें कोई सिमेंटिक सामग्री नहीं है, और एक अर्थपूर्ण तत्व को उनमें डालना मार्कअप में एक झूठ होगा। एक सेक्शन केवल एक पृष्ठभूमि रंग के लिए उपयोग किया जाता है जो दावा करता है कि यह एक क्षेत्र है जो नहीं है। तो नियम दोनों तरीकों से चलता है। जब एक नामित तत्व फिट बैठता है तो <div> के लिए न पहुंचें, और जब सब कुछ जो आपको चाहिए वह एक बॉक्स है तो एक नामित तत्व के लिए न पहुंचें।

देखने के लिए विफलता मोड इंटरेक्टिव <div> है: एक तत्व जिसे JavaScript में एक क्लिक हैंडलर दिया गया है ताकि यह एक बटन या लिंक की तरह काम करे। यह रेंडर करता है और यह माउस के साथ क्लिक करता है, तो यह तैयार दिखता है, लेकिन इसकी कोई भूमिका नहीं है, यह टैब ऑर्डर में नहीं है, यह Enter या Space पर प्रतिक्रिया नहीं करता है, और एक स्क्रीन रीडर कुछ नहीं घोषित करता है। tabindex, role, और कुंजी हैंडलर के साथ इसे फिर से बनाना एक <button> का एक नाजुक पुनः कार्यान्वयन है जो पहले से मौजूद है। अगर कुछ एक नियंत्रण की तरह व्यवहार करता है, तो नियंत्रण तत्व का उपयोग करें; उन भागों के लिए <div> और <span> को रखें जो कभी केवल पिक्सल हैं।

Junodiv और span, गैर-सिमेंटिक फॉलबैक<div> एक सादा बॉक्स है और <span> कुछ शब्दों के लिए एक सादा रैपर है, और न तो कुछ मतलब है। उन्हें उपयोग करें जब आपको केवल कुछ समूहीकृत या स्टाइल करने की आवश्यकता हो और कोई नामित तत्व फिट न हो। अगर चीज़ के पास अर्थ है, जैसे एक मेनू या बटन, तो इसके बजाय उस तत्व का उपयोग करें।

Junodiv और span, गैर-सिमेंटिक फॉलबैक<div> या <span> सही कॉल है जब एकमात्र कार्य लेआउट या स्टाइलिंग है, कोई अर्थ बताने के लिए नहीं। उनके बारे में बुरा महसूस न करें, विपरीत के बारे में बुरा महसूस करें: एक क्लिक करने योग्य <div> जो <button> होना चाहिए, या एक रैपर <div> जो <article> होना चाहिए। खाली तत्व खाली अर्थ के लिए, नामित तत्व वास्तविक अर्थ के लिए।

Junodiv और span, गैर-सिमेंटिक फॉलबैक<div> और <span> एक्सेसिबिलिटी ट्री में कोई भूमिका नहीं है, जो सटीक कारण है कि वे शुद्ध स्टाइलिंग हुक के लिए सही हैं और कुछ अर्थपूर्ण के लिए गलत हैं। जो आपको काटेगा वह इंटरेक्टिव <div> है जिसमें एक क्लिक हैंडलर है: कोई फोकस नहीं, कोई कीबोर्ड नहीं, कोई घोषणा नहीं, और tabindex और role पैच के ढेर से नकली करने के लिए जो <button> आपको कुछ भी नहीं के लिए देता है। अगर यह एक नियंत्रण की तरह व्यवहार करता है, तो इसे नियंत्रण बनाएं।

सही तत्व चुनना

जब आप निश्चित नहीं हों कि कौन सा तत्व उपयोग करना है, तो एक सादा सवाल पूछें: यह चीज़ क्या है? यह कैसी दिखती है नहीं, लेकिन यह क्या है। उत्तर आमतौर पर आपके लिए तत्व का नाम बताता है। शीर्ष भर में लिंक की एक पंक्ति नेविगेशन है, तो यह <nav> है। नीचे छोटी प्रिंट का एक ब्लॉक पाद लेख है, तो यह <footer> है। एक मूल्य जिसे आप रंग देना चाहते हैं वास्तव में कुछ नहीं है, तो यह <span> है।

अर्थ से शुरू करें, और केवल <div> या <span> पर वापस आएं जब वास्तविक उत्तर "यह केवल एक बॉक्स है"। इस आदत को जल्दी प्राप्त करने से आपके पृष्ठ अपने आप को वर्णन करते हैं, और यह उस क्षण से भुगतान करता है जब आपको या किसी को मार्कअप फिर से पढ़ना होता है।

सही तत्व चुनना एक छोटा निर्णय है जो आप हर बार चला सकते हैं। पूछें कि सामग्री क्या है, और उत्तर को तत्व चुनने दें:

• क्या यह अपनी पूरी चीज़ है जो अपने आप पर समझदारी होगी? <article>।
• क्या यह एक शीर्षक के साथ संबंधित सामग्री का एक समूहित हिस्सा है? <section>।
• क्या यह नेविगेशन है? <nav>। एक क्षेत्र का परिचय? <header>। एक समापन? <footer>।
• क्या यह पक्ष सामग्री है जो मुख्य सामग्री का समर्थन करती है? <aside>।
• क्या कोई अर्थ है, केवल एक लेआउट या स्टाइलिंग आवश्यकता? <div>, या एक लाइन के अंदर <span>।

सबसे मुश्किल कांटा <section> बनाम <article> बनाम <div> है। इसे क्रम में चलाएं। अगर ब्लॉक अपने आप पर खड़े हो सकते हैं, तो यह <article> है। यदि नहीं लेकिन यह अपने शीर्षक के साथ एक थीम वाला समूह है, तो यह <section> है। अगर इसका कोई शीर्षक नहीं है और कोई अर्थ नहीं है, और केवल स्टाइल या बाहर निकालने के लिए मौजूद है, तो यह <div> है। एक <section> में लगभग हमेशा एक शीर्षक होना चाहिए; अगर आप एक के लिए नहीं सोच सकते हैं, तो यह एक मजबूत संकेत है कि आप <div> चाहते थे।

<main>
  <section>
    <h2>नवीनतम पोस्ट</h2>
    <article>
      <h3>मैंने सादे HTML में क्यों स्विच किया</h3>
      <p>...</p>
    </article>
    <article>
      <h3>भारी ढांचे के खिलाफ मामला</h3>
      <p>...</p>
    </article>
  </section>
</main>

यहां <section> एक थीम वाला समूह है, "नवीनतम पोस्ट", और इसके अंदर प्रत्येक पोस्ट एक <article> है क्योंकि यह अपने आप पर खड़े होता है। नेस्टिंग अर्थ को दर्पण करती है।

अच्छी तरह चुनना पहले अर्थ पढ़ने और कभी भी लेआउट नहीं करने के नीचे आता है, लेकिन कुछ नियम सामान्य निर्णयों को यांत्रिक बनाते हैं।

प्रति पृष्ठ बिल्कुल एक <main> है। यह प्राथमिक सामग्री को चिह्नित करता है, वह हिस्सा जो साइट भर में दोहराए जाने वाले हेडर, nav, और footer की तुलना में इस पृष्ठ के लिए अद्वितीय है। एक्सेसिबिलिटी ट्री में एक से अधिक <main> एक स्क्रीन-रीडर उपयोगकर्ता को दो "main" लक्ष्य देता है और यह जानने का कोई तरीका नहीं है कि कौन सा वास्तविक है, तो इसे एकवचन रखें। सब कुछ साइट-व्यापी इसके बाहर है।

दूसरा नियम जो बार-बार मायने रखता है वह है दोहराए गए लैंडमार्क को लेबल करना। जब एक पृष्ठ में एक ही लैंडमार्क प्रकार के दो तत्व होते हैं, एक प्राथमिक <nav> और एक पृष्ठ में विषय सूची, दोनों "navigation" के रूप में घोषित करते हैं और उपयोगकर्ता उन्हें अलग नहीं कर सकते। आप aria-label के साथ disambiguate करते हैं, एक विशेषता जो स्क्रीन पर कुछ भी दिखाए बिना एक क्षेत्र के लिए एक छोटा सुलभ नाम आपूर्ति करती है:

<nav aria-label="प्राथमिक">
  <a href="/">होम</a>
  <a href="/blog">ब्लॉग</a>
</nav>

<nav aria-label="इस पृष्ठ पर">
  <a href="#intro">परिचय</a>
  <a href="#setup">सेटअप</a>
</nav>

अब दोनों क्षेत्र "प्राथमिक नेविगेशन" और "इस पृष्ठ पर नेविगेशन" के रूप में घोषित करते हैं, और लैंडमार्क सूची उपयोग करने योग्य है। किसी भी दोहराए गए लैंडमार्क पर समान लेबलिंग लागू करें, <aside> या <section> सहित। <section> के लिए, याद रखें कि यह केवल तभी लैंडमार्क बन जाता है जब इसका एक सुलभ नाम होता है, चाहे वह एक संबद्ध शीर्षक से हो या aria-label।

इस सबके पीछे मेटा-नियम: मार्कअप एक मशीन-पाठ्य विवरण है दस्तावेज़, स्क्रीन रीडर, सर्च क्रॉलर, रीडर-मोड उपकरण, और आपके भविष्य के स्व द्वारा पढ़ा जाता है। तत्वों को अर्थ के आधार पर चुनना यह है कि वह विवरण सच क्या बनाता है। लेआउट CSS का कार्य है, और जब भी आप अपने आप को एक तत्व चुनते हुए पाते हैं कि यह कैसे दिखता है, आप गलत उपकरण का उपयोग करके CSS के लेन में चले गए हैं।

Junoसही तत्व चुनना जब आप अटके हों, तो पूछें कि चीज़ क्या है, यह कैसी दिखती है नहीं। नेविगेशन <nav> है, छोटी प्रिंट <footer> है, एक सादा बॉक्स जिसे आप स्टाइल करना चाहते हैं <div> है। हर बार अर्थ से शुरू करें, और आपके पृष्ठ अपने आप को वर्णन करते हैं।

Junoसही तत्व चुनना छोटी चेकलिस्ट चलाएं: अपने आप पर खड़ा <article> है, एक शीर्षक के साथ थीम समूह <section> है, कोई अर्थ और केवल स्टाइलिंग <div> है। टाई-ब्रेकर जो अधिकांश सेक्शन-बनाम-div तर्कों को हल करता है: अगर आप इसके लिए एक शीर्षक नाम नहीं दे सकते हैं, तो आप <div> चाहते थे। अर्थ को टैग चुनने दें और नेस्टिंग अपने आप को सॉर्ट करता है।

Junoसही तत्व चुनना दो नियम अधिकांश वजन रखते हैं: प्रति पृष्ठ बिल्कुल एक <main>, और दोहराए गए लैंडमार्क को aria-label के साथ लेबल करते हैं ताकि दो navs दोनों "navigation" न कहें। ध्यान रखें कि <section> केवल तभी लैंडमार्क बन जाता है जब इसका एक सुलभ नाम होता है। अर्थ के आधार पर तत्व चुनें और दिखावट को CSS पर छोड़ दें, क्योंकि जिस क्षण आप कैसे यह प्रदान करता है के लिए एक टैग चुनते हैं, आप गलत उपकरण के साथ CSS का काम कर रहे हैं।