लिंक और नेविगेशन

docs.scrimba.com

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

एंकर एलिमेंट

एक लिंक एंकर एलिमेंट के साथ बनाया जाता है, जिसे <a> लिखा जाता है। आप इसे एक href एट्रिब्यूट देते हैं, जो बताता है कि लिंक कहां जाता है, और ओपनिंग और क्लोजिंग टैग के बीच का टेक्स्ट वह है जो आगंतुक देखता है और क्लिक करता है।

<a href="https://scrimba.com">Scrimba पर जाएं</a>

शब्द "Scrimba पर जाएं" एक क्लिक करने योग्य लिंक के रूप में दिखाई देते हैं। उन पर क्लिक करें और ब्राउज़र href में पते को लोड करता है।

href को संकेत पर लिखे गए गंतव्य के रूप में सोचें, और लिंक टेक्स्ट को संकेत पर रंगा हुआ लेबल के रूप में सोचें। लेबल वह है जो लोग पढ़ते हैं; गंतव्य वह है जहां तीर इशारा करता है।

एंकर एलिमेंट <a> सामग्री को एक लिंक के रूप में चिह्नित करता है, और इसकी href एट्रिब्यूट (हाइपरटेक्स्ट संदर्भ के लिए संक्षिप्त) गंतव्य रखती है। टैग के बीच की सामग्री लिंक का लेबल है, क्लिक करने वाला हिस्सा।

<a href="https://scrimba.com/courses">कोर्स ब्राउज़ करें</a>

<a> एक इनलाइन एलिमेंट है, इसलिए यह एक शब्द की तरह टेक्स्ट की एक पंक्ति के अंदर बैठता है, न कि एक नया ब्लॉक शुरू करता है। यही कारण है कि आप किसी पैराग्राफ के बीच में एक लिंक डाल सकते हैं बिना पंक्ति को तोड़े।

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

<a href="/courses/html">
  <img src="html-course.jpg" alt="HTML कोर्स">
  <span>HTML कोर्स शुरू करें</span>
</a>

एंकर एलिमेंट <a> केवल तभी एक लिंक बन जाता है जब वह href एट्रिब्यूट रखता है। इसके बिना यह एक प्लेसहोल्डर है जिसे ब्राउज़र लिंक के रूप में नहीं मानता है। लेबल, टैग के बीच का टेक्स्ट, वह हिस्सा है जो उन लोगों के लिए सबसे अधिक मायने रखता है जो पृष्ठ को ऊपर से नीचे तक नहीं पढ़ते।

एक स्क्रीन रीडर (सॉफ़्टवेयर जो उन लोगों के लिए पृष्ठ को जोर से पढ़ता है जो इसे नहीं देख सकते) पृष्ठ पर हर लिंक की एक सूची निकाल सकता है ताकि उसका उपयोगकर्ता उन्हें संदर्भ से बाहर स्किम कर सके। उस सूची में, "यहां क्लिक करें" और "और पढ़ें" ऐसे दिखाई देते हैं कि कोई भी उन्हें अलग नहीं बता सकता, इसलिए लिंक टेक्स्ट को संदर्भ से बाहर अपने आप ही समझदारी बनानी होगी। इसे गंतव्य का वर्णन करने के लिए लिखें: "रिफंड नीति पढ़ें", न कि "यहां क्लिक करें"।

सर्च इंजन एक ही सिग्नल को पढ़ते हैं। एक लिंक के अंदर के शब्द, एंकर टेक्स्ट, एक क्रॉलर (जो प्रोग्राम एक सर्च इंजन पृष्ठों को पढ़ने के लिए उपयोग करता है) को बताते हैं कि लिंक किए गए पृष्ठ के बारे में क्या है, इसलिए एक विवरणात्मक लेबल उस पृष्ठ को भी मदद देता है जिसे आप लिंक करते हैं और साथ ही अपने आप को भी।

Junoएंकर एलिमेंट एक एंकर <a href="..."> है: href वह है जहां यह जाता है, टैग के बीच का टेक्स्ट वह है जो लोग क्लिक करते हैं। वह पूरा एलिमेंट है। इन दोनों भागों को प्राप्त करें और आप वेब पर कहीं भी लिंक कर सकते हैं।

Junoएंकर एलिमेंट<a> प्लस एक href एक लिंक बनाता है, और यह इनलाइन है इसलिए यह सीधे एक वाक्य में आता है। आप केवल टेक्स्ट से अधिक लपेट सकते हैं, एक छवि या पूरा ब्लॉक काम करता है। लेबल क्लिक करने वाला बिट है, href गंतव्य है।

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

निरपेक्ष और सापेक्ष URLs

हर लिंक को एक पता चाहिए जिसकी ओर इशारा करना है, और दो प्रकार हैं। एक निरपेक्ष URL पूरा पता है, https:// से शुरू होता है, वही जो आप पता बार में टाइप करते हैं। इसका उपयोग दूसरी वेबसाइट से लिंक करने के लिए करें:

<a href="https://scrimba.com">Scrimba का होम पेज</a>

एक सापेक्ष URL आपकी अपनी साइट पर दूसरे पृष्ठ के लिए एक शॉर्टकट है। पूरे पते की बजाय, आप अपने वर्तमान स्थान से पथ देते हैं:

<a href="about.html">हमारे बारे में</a>

वह लिंक वर्तमान पृष्ठ के समान फोल्डर में एक about.html फ़ाइल ढूंढता है। एक निरपेक्ष URL देश और शहर के साथ एक पूरा डाक पता है; एक सापेक्ष URL "यहां से दो दरवाजे नीचे" है।

निरपेक्ष URLs पूरे पते को ले जाते हैं, जिसमें प्रोटोकॉल (https) और डोमेन शामिल है। सापेक्ष URLs को वर्तमान पृष्ठ के पते के विरुद्ध हल किया जाता है, इसलिए वे एक पूरे स्थान की बजाय एक पथ का वर्णन करते हैं:

<a href="/blog/getting-started">शुरुआत करना</a>   <!-- साइट रूट से -->
<a href="getting-started">शुरुआत करना</a>          <!-- वर्तमान फोल्डर से -->
<a href="../index.html">होम पर वापस</a>              <!-- एक फोल्डर ऊपर -->

एक अग्रणी / इसे रूट-सापेक्ष बनाता है: यह साइट रूट से शुरू होता है, इसलिए यह उसी स्थान की ओर इशारा करता है चाहे आप किस पृष्ठ से लिंक करें। कोई अग्रणी स्लैश नहीं का अर्थ है "वर्तमान पृष्ठ के फोल्डर के सापेक्ष", और ../ एक स्तर ऊपर चला जाता है।

href गैर-वेब पृष्ठों के पते को भी संभालता है। mailto: आगंतुक के ईमेल ऐप को एक नए संदेश के साथ खोलता है, और tel: फोन पर एक कॉल शुरू करता है:

<a href="mailto:[email protected]">हमें ईमेल करें</a>
<a href="tel:+15551234567">समर्थन को कॉल करें</a>

हर सापेक्ष URL को एक बेस URL के विरुद्ध हल किया जाता है, जो डिफ़ॉल्ट रूप से वर्तमान पृष्ठ का पता है। तो एक ही href विभिन्न स्थानों को हल कर सकता है इस बात पर निर्भर करता है कि पृष्ठ कहां रहता है, और यह पूरी वजह है कि तीन रूप अलग व्यवहार करते हैं:

• रूट-सापेक्ष, एक पथ / से शुरू होता है (/blog/post): डोमेन रूट से हल किया जाता है, इसलिए यह साइट पर हर पृष्ठ से एक ही स्थान की ओर इशारा करता है।
• दस्तावेज़-सापेक्ष, कोई अग्रणी स्लैश नहीं (post, ../post): वर्तमान पृष्ठ के फोल्डर से हल किया जाता है, और यह तुरंत टूट जाता है जब आप पृष्ठ को स्थानांतरित करते हैं।
• पूरी तरह निरपेक्ष (https://example.com/blog/post): प्रोटोकॉल और डोमेन को स्पष्ट रूप से नाम देता है, अन्य साइटों के लिए आवश्यक और अपनी साइट के लिए अनावश्यक रूप से नाजुक।

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

mailto: और tel: पर एक नोट: वे साधारण href मान हैं, इसलिए वे एक ही एंकर नियमों का पालन करते हैं, लेकिन वे दूसरे ऐप (एक ईमेल क्लाइंट या फोन डायलर) को नियंत्रण सौंपते हैं और हर डिवाइस पर अलग व्यवहार करते हैं। एक सुविधा के रूप में उपयोगी, कभी आपको पहुंचने के लिए एकमात्र मार्ग के रूप में नहीं।

Junoनिरपेक्ष और सापेक्ष URLs दो तरह के पते: एक निरपेक्ष URL दूसरी साइटों के लिए पूर्ण https://... है, एक सापेक्ष जैसे about.html आपकी अपनी साइट पर एक पृष्ठ के लिए एक शॉर्टकट है। पूरा डाक पता बनाम "यहां से दो दरवाजे"। अपनी साइट के पृष्ठों के लिए सापेक्ष लिंक के साथ शुरू करें और आप बहुत कम टाइप करेंगे।

Junoनिरपेक्ष और सापेक्ष URLs सापेक्ष URLs वर्तमान पृष्ठ के विरुद्ध हल होते हैं, इसलिए एक अग्रणी / का अर्थ है "साइट रूट से" और ../ का अर्थ है "एक फोल्डर ऊपर"। href mailto: और tel: भी लेता है, जो ईमेल ऐप या डायलर को सौंपते हैं। रूट-सापेक्ष आपकी अपनी साइट के अंदर लिंक के लिए सुरक्षित डिफ़ॉल्ट है।

Junoनिरपेक्ष और सापेक्ष URLs हर सापेक्ष URL वर्तमान पृष्ठ के पते के विरुद्ध हल होता है, यही कारण है कि रूट-सापेक्ष लिंक (/blog/post) फोल्डर चाल से बचते हैं और दस्तावेज़-सापेक्ष नहीं होते। अन्य लोगों की साइटों के लिए पूरी तरह निरपेक्ष URLs रखें। और चूंकि mailto: और tel: आगंतुक के डिवाइस पर निर्भर करते हैं, इसे पहुंचे जाने का एकमात्र तरीका न बनाएं।

लिंक लक्ष्य, rel, और नई टैब में खोलना

डिफ़ॉल्ट रूप से, एक लिंक पर क्लिक करने से नया पृष्ठ एक ही टैब में लोड होता है, पृष्ठ को बदल देता है जिस पर आप थे। कभी-कभी आप चाहते हैं कि यह एक नई टैब में खुले, ताकि आगंतुक आपका पृष्ठ खुला रखे। आप इसे target एट्रिब्यूट को _blank पर सेट करके करते हैं:

<a href="https://scrimba.com" target="_blank">Scrimba को नई टैब में खोलें</a>

_blank का अर्थ है "एक ताज़ी, खाली टैब"। सामान्य रूप से एक लिंक खोलना एक दरवाज़े के माध्यम से अगले कमरे में जाना है; target="_blank" दूसरा दरवाज़ा खोलता है ताकि पहला कमरा वहीं रहे।

target="_blank" लिंक को एक नए ब्राउजिंग संदर्भ में खोलता है, एक नई टैब या विंडो, ताकि आगंतुक अपने पृष्ठ पर अपनी जगह न खो दे। यह एक पकड़ के साथ आता है जो एक आदत बनाने के लायक है: इसे rel="noopener" के साथ जोड़ें।

<a href="https://example.com" target="_blank" rel="noopener">
  बाहरी संसाधन
</a>

बिना noopener के, जो पृष्ठ आप खोलते हैं उसे JavaScript के माध्यम से आपके पास एक संदर्भ मिलता है और यह उसमें हस्तक्षेप कर सकता है। rel="noopener" वह कनेक्शन काट देता है। आधुनिक ब्राउज़र अब target="_blank" के लिए यह स्वचालित रूप से करते हैं, लेकिन इसे स्वयं लिखना स्पष्ट है और पुराने ब्राउज़र पर सुरक्षित रहता है।

केवल उन लिंक के लिए नई टैब में खोलें जो आपकी साइट से निकलते हैं। साइट के भीतर लिंक को नई टैब में खोलने से लोग आश्चर्यचकित हो जाते हैं और बैक बटन टूट जाता है, इसलिए target="_blank" को उन लिंक के लिए सुरक्षित रखें जो कहीं और जा रहे हैं, और इसे जानबूझकर भी उपयोग करें।

rel एट्रिब्यूट (संबंध के लिए संक्षिप्त) वर्णन करता है कि लिंक किया गया पृष्ठ आपसे कैसे संबंधित है, और इसके मानों का एक मुट्ठी वास्तविक काम करता है। प्रत्येक एक विशिष्ट समस्या को हल करता है:

• noopener: नए पृष्ठ को window.opener के माध्यम से आपके पास एक JavaScript संदर्भ प्राप्त करने से रोकता है, जिसका उपयोग अन्यथा आपकी टैब को एक नकली पृष्ठ पर पुनर्निर्देशित करने के लिए कर सकता है। इसे हमेशा target="_blank" के साथ जोड़ें। ब्राउज़र अब इसका अर्थ निकालते हैं, लेकिन इसे कथन करना पुराने ब्राउज़र की सुरक्षा करता है।
• noreferrer: साथ ही रेफरर को हटाता है (हेडर जो गंतव्य को बताता है कि आगंतुक किस पृष्ठ से आया है), ताकि लक्ष्य साइट नहीं देख सकता कि क्लिक आपसे आया है। यह noopener को भी अर्थ निकालता है। इसका उपयोग तब करें जब आप यह प्रकट नहीं करना चाहते कि लिंक कहां रहता है।
• nofollow: सर्च इंजन को लिंक किए गए पृष्ठ को रैंकिंग क्रेडिट पास नहीं करने के लिए बताता है। इसे उन लिंक पर पहुंचें जिनके लिए आप वाउच नहीं करते हैं, जैसे उपयोगकर्ता द्वारा प्रस्तुत सामग्री या टिप्पणियां।
• sponsored: एक भुगतान या सहबद्ध लिंक को चिह्नित करता है, ताकि सर्च इंजन जानें कि लिंक भुगतान के लिए रखा गया था। इसका उपयोग आपको भुगतान किए गए लिंक के लिए उनकी दिशानिर्देशों के अंदर रखता है।

आप उन्हें एक स्पेस-सेपरेटेड सूची में संयोजित कर सकते हैं, rel="noopener noreferrer", और ब्राउज़र प्रत्येक को लागू करता है।

Junoलिंक लक्ष्य, rel, और नई टैब में खोलनाtarget="_blank" एक लिंक को एक ताज़ी टैब में खोलता है ताकि आपका पृष्ठ रहे। इसे बंद छोड़ दें और लिंक एक ही टैब में खोलता है, जो लोग ज्यादातर समय की अपेक्षा करते हैं। नई टैब को उन लिंक के लिए बचाएं जो अन्य साइटों पर जा रहे हैं।

Junoलिंक लक्ष्य, rel, और नई टैब में खोलनाtarget="_blank" एक नई टैब खोलता है, और आप इसे rel="noopener" के साथ जोड़ते हैं ताकि नया पृष्ठ आपकी में वापस नहीं पहुंच सकता। ब्राउज़र मुख्य रूप से यह अब करते हैं, लेकिन इसे लिखने से पुराने ब्राउज़र पर सुरक्षित रहता है। अपने पृष्ठों को नई-टैब न करें: यह बैक बटन को तोड़ता है और लोगों को हैरान करता है।

Junoलिंक लक्ष्य, rel, और नई टैब में खोलनाrel एक छोटा टूलबॉक्स है: noopener आपकी टैब के लिए JavaScript लिंक काटता है, noreferrer यह भी छुपाता है कि क्लिक कहां से आया है, nofollow रैंकिंग क्रेडिट रोकता है, sponsored भुगतान किए गए लिंक को झंडा करता है। उन्हें एक स्पेस के साथ संयोजित करें, जैसे noopener noreferrer। जब इसकी समस्या दिखाई दे तो प्रत्येक तक पहुंचें, डिफ़ॉल्ट रूप से नहीं।

फ्रैगमेंट IDs के साथ पेज के भीतर लिंक

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

<h2 id="pricing">मूल्य निर्धारण</h2>

फिर उस नाम के सामने एक # लगाकर इसे लिंक करें:

<a href="#pricing">मूल्य निर्धारण पर जाएं</a>

लिंक पर क्लिक करने से पृष्ठ मूल्य निर्धारण शीर्षक तक स्क्रॉल हो जाता है। #name भाग को एक फ्रैगमेंट कहा जाता है। id एक बुकमार्क है जो आप पृष्ठ में फिसलाते हैं, और # लिंक वह है जहां आप सीधे इसे फ्लिप करते हैं।

एक id एक एलिमेंट को एक अनोखा नाम देता है, और एक लिंक जिसका href # से शुरू होता है वर्तमान पृष्ठ पर उस id वाले एलिमेंट की ओर इशारा करता है:

<a href="#contact">संपर्क करें</a>
...
<section id="contact">
  <h2>हमसे संपर्क करें</h2>
</section>

# के बाद का मान फ्रैगमेंट पहचानकर्ता है। दो नियम इसे काम करते हैं: एक id पृष्ठ पर अनोखी होनी चाहिए, और लिंक का फ्रैगमेंट इससे बिल्कुल मेल खाना चाहिए, मामले सहित।

आप दूसरे पृष्ठ पर एक फ्रैगमेंट के लिए भी लिंक कर सकते हैं, URL के बाद इसे जोड़कर:

<a href="/help#refunds">रिफंड नीति</a>

जो मदद पृष्ठ को लोड करता है और सीधे id="refunds" वाले एलिमेंट तक स्क्रॉल करता है। href में एक नंगा # या #top पृष्ठ के शीर्ष पर वापस कूदता है।

एक फ्रैगमेंट लिंक (एक href जो # से शुरू होता है) पृष्ठ को उस एलिमेंट तक ले जाता है जिसका id मेल खाता है, और यह उस एलिमेंट तक कीबोर्ड फोकस भी ले जाता है जब लक्ष्य फोकस प्राप्त कर सकता है। वह व्यवहार एक स्किप लिंक का आधार है: एक लिंक, आमतौर पर पृष्ठ में बहुत पहली चीज़, जो कीबोर्ड या स्क्रीन-रीडर उपयोगकर्ता को दोहराए गए नेविगेशन के पास मुख्य सामग्री पर कूदने देता है।

<body>
  <a href="#main" class="skip-link">मुख्य सामग्री पर जाएं</a>
  <nav>...</nav>
  <main id="main">
    ...
  </main>
</body>

इसके बिना, कोई व्यक्ति कीबोर्ड द्वारा नेविगेट करता हुआ हर पृष्ठ पर हर नेविगेशन लिंक के माध्यम से टैब करना होता है सामग्री तक पहुंचने से पहले। स्किप लिंक आमतौर पर छिपी होती है जब तक इसे फोकस न मिले, फिर यह दिखाई देता है, इसलिए यह माउस उपयोगकर्ताओं के लिए रास्ते से बाहर रहता है जबकि कीबोर्ड उपयोगकर्ताओं के लिए पहली रुकावट है।

दो विवरण निर्णय करते हैं कि क्या यह काम करता है। लक्ष्य (<main id="main"> यहाँ) वास्तविक सामग्री कंटेनर होना चाहिए, और उस कंटेनर को tabindex="-1" देने से यह सुनिश्चित होता है कि फोकस हर ब्राउज़र में वहां पहुंचता है (tabindex="-1" का अर्थ है "स्क्रिप्ट द्वारा फोकस करने योग्य लेकिन सामान्य टैब क्रम का भाग नहीं")। इसे परीक्षण करें Tab को तब दबाएं जब पृष्ठ लोड हो: पहली चीज़ जो फोकस हो वह स्किप लिंक होनी चाहिए।

Junoफ्रैगमेंट IDs के साथ पेज के भीतर लिंक एक स्थान को id दें, फिर # और उसी नाम के साथ लिंक करें, जैसे <a href="#pricing">। पृष्ठ सीधे वहां स्क्रॉल करता है। id को एक बुकमार्क के रूप में और # लिंक को इसे फ्लिप करने के रूप में चित्रित करें।

Junoफ्रैगमेंट IDs के साथ पेज के भीतर लिंक एक href में #name पृष्ठ में उस id वाले एलिमेंट पर कूदता है। id पृष्ठ पर अनोखी होनी चाहिए और फ्रैगमेंट से बिल्कुल मेल खाना चाहिए, मामले के साथ। दूसरे पृष्ठ पर एक स्थान पर उतरने के लिए URL के बाद #name जोड़ें।

Junoफ्रैगमेंट IDs के साथ पेज के भीतर लिंक फ्रैगमेंट लिंक फोकस को स्थानांतरित करते हैं, केवल स्क्रॉल स्थिति नहीं, जो स्किप लिंक को काम करने देता है: एक पहले-पृष्ठ <a href="#main"> कीबोर्ड उपयोगकर्ताओं को nav के पास कूदने देता है। इसे अपने वास्तविक सामग्री कंटेनर पर इशारा करें और उसे tabindex="-1" दें ताकि फोकस हर जगह वहां पहुंचे। एक ताज़े पृष्ठ लोड पर Tab दबाकर इसे जांचें।

नेविगेशन बनाना

अधिकांश साइटों के शीर्ष पर लिंक की एक पंक्ति होती है: होम, परिचय, संपर्क। वह एक नेविगेशन है, और यह एकत्र किए गए एंकर का एक सेट है। HTML के पास इसके लिए एक एलिमेंट है, <nav>, जो एक ब्लॉक को पृष्ठ के नेविगेशन के रूप में चिह्नित करता है:

<nav>
  <a href="/">होम</a>
  <a href="/about">परिचय</a>
  <a href="/contact">संपर्क</a>
</nav>

प्रत्येक लिंक एक साधारण एंकर है। उन्हें <nav> में लपेटना ब्राउज़र और अन्य उपकरणों को बताता है "यह समूह साइट के चारों ओर कैसे जाना है"।

एक नेविगेशन लिंक की एक सूची है, और इसे बनाने का प्रामाणिक तरीका बिल्कुल कहता है: एक <nav> के अंदर एक अनुक्रमहीन सूची।

<nav>
  <ul>
    <li><a href="/">होम</a></li>
    <li><a href="/courses">कोर्स</a></li>
    <li><a href="/pricing">मूल्य निर्धारण</a></li>
  </ul>
</nav>

सूची क्यों? एक स्क्रीन रीडर "सूची, तीन आइटम" घोषित करता है, इसलिए इसका उपयोगकर्ता जानता है कि उन्हें कितने लिंक की अपेक्षा करनी चाहिए। <nav> एलिमेंट एक लैंडमार्क है: सहायक उपकरण उपयोगकर्ताओं को सीधे इस पर कूदने देते हैं, जिस तरह स्किप लिंक मुख्य सामग्री पर कूदता है। बड़े नेविगेशन ब्लॉक के लिए nav का उपयोग करें, हर लिंक समूह के लिए नहीं।

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

<nav aria-label="Primary">
  <ul>
    <li><a href="/">होम</a></li>
    <li><a href="/courses" aria-current="page">कोर्स</a></li>
    <li><a href="/pricing">मूल्य निर्धारण</a></li>
  </ul>
</nav>

वह एट्रिब्यूट जो यहां अपनी जगह अर्जित करता है वह है aria-current। उस लिंक पर aria-current="page" सेट करें जो उस पृष्ठ की ओर इशारा करता है जिस पर आगंतुक पहले से है। दृश्य रूप से आप अपने लिंक को हाइलाइट करके वर्तमान पृष्ठ दिखा सकते हैं; aria-current="page" एक स्क्रीन रीडर को भी यही बात कहता है, जो फिर लिंक को "वर्तमान पृष्ठ" के रूप में घोषित करता है। इसके बिना, एक हाइलाइट किया हुआ लिंक दृष्टि उपयोगकर्ताओं को सक्रिय दिखता है लेकिन जो कोई भी रंग नहीं देख सकता उसके लिए अन्य से अप्रभेद्य है।

मार्कअप को ईमानदार रखें: वर्तमान पृष्ठ का लिंक एक वास्तविक एंकर रहता है, इसलिए कीबोर्ड व्यवहार सुसंगत है, और aria-current अकेले रंग के बजाय "आप यहां हैं" अर्थ रखता है।

Junoनेविगेशन बनाना एक नेविगेशन लिंक का एक समूह है जो <nav> में लपेटा हुआ है, जैसे होम, परिचय, संपर्क। <nav> सभी को बताता है "यह साइट के चारों ओर कैसे जाना है"। अंदर की लिंक सादे एंकर हैं, सीखने के लिए कुछ नया नहीं।

Junoनेविगेशन बनाना एक nav को <nav> के अंदर लिंक के <ul> के रूप में बनाएं: सूची एक स्क्रीन रीडर को बताता है कितने लिंक आने वाले हैं, और <nav> एक लैंडमार्क है जो लोग कूद सकते हैं। इसे वास्तविक मेनू, शीर्ष बार और पादलेख के लिए बचाएं, लिंक के हर क्लस्टर के लिए नहीं।

Junoनेविगेशन बनाना<nav> एक लैंडमार्क है, इसलिए जब किसी पृष्ठ के पास एक से अधिक हों तो प्रत्येक को aria-label से लेबल करें। आगंतुक के वर्तमान पृष्ठ को aria-current="page" के साथ चिह्नित करें: वह है कि एक स्क्रीन रीडर सीखता है कि एक हाइलाइट रंग दृश्य उपयोगकर्ताओं को क्या दिखाता है। वर्तमान लिंक को एक वास्तविक एंकर रखें ताकि कीबोर्ड व्यवहार सुसंगत रहे।