HTML5 लैंडमार्क एलिमेंट का इस्तेमाल, नेविगेशन को बेहतर बनाने के लिए किया जाता है

HTML5 एलिमेंट, जैसे कि main, nav, और aside, लैंडमार्क के तौर पर काम करते हैं. या खास क्षेत्रों तक पहुंचने के लिए और अन्य सहायक टेक्नोलॉजी इसमें मदद कर सकती हैं. लैंडमार्क एलिमेंट का इस्तेमाल करके, आप अपनी साइट पर नेविगेशन अनुभव में नाटकीय रूप से सुधार कर सकते हैं का इस्तेमाल किया जा सकता है. ज़्यादा जानकारी के लिए डेक यूनिवर्सिटी HTML 5 और ARIA लैंडमार्क.

लैंडमार्क की मैन्युअल तरीके से जांच करने का तरीका

लैंडमार्क एलिमेंट की W3C की सूची का इस्तेमाल करें ताकि यह जांच की जा सके कि आपके पेज का हर मुख्य सेक्शन किसी लैंडमार्क एलिमेंट में शामिल है या नहीं. उदाहरण के लिए:

<header>
  <p>Put product name and logo here</p>
</header>
<nav>
  <ul>
    <li>Put navigation here</li>
  </ul>
</nav>
<main>
  <p>Put main content here</p>
</main>
<footer>
  <p>Put copyright info, supplemental links, etc. here</p>
</footer>

आप Microsoft के Accessibility Insights एक्सटेंशन आपके पेज के स्ट्रक्चर को विज़ुअलाइज़ करने और ऐसे सेक्शन की पहचान करने के लिए जो लैंडमार्क में शामिल नहीं हैं:

Accessibility Insights एक्सटेंशन से हाइलाइट किए गए लैंडमार्क वाले web.dev का स्क्रीनशॉट

लैंडमार्क को असरदार तरीके से इस्तेमाल करने का तरीका

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

शीर्षक और लैंडमार्क पोस्ट देखें हमारा वीडियो देखें.

संसाधन