नेविगेशन

जैसा कि आपने लिंक में जाना है, href एट्रिब्यूट वाला <a> एलिमेंट ऐसे लिंक बनाता है जिन्हें उपयोगकर्ता, लिंक पर क्लिक करके या टैप करके. सूची में, आपने कॉन्टेंट की सूचियां बनाने का तरीका सीखा. इस सेक्शन में आपको पता चलेगा कि नेविगेशन को बनाने के लिए एक साथ लिंक करता है.

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

हमेशा पक्का करें कि उपयोगकर्ता आपकी साइट के किसी भी ऐसे पेज पर जा सकें जिस पर कम से कम क्लिक मिले हों. साथ ही, इस दौरान नेविगेशन का भी ध्यान रखें आसान और मुश्किल नहीं है. हालांकि, नेविगेशनल एलिमेंट के लिए कोई खास शर्त नहीं है. MachineLearningWorkshop.com, एक पेज वाली वेबसाइट हो, तो उसके सबसे ऊपर दाईं ओर एक लोकल नेविगेशन बार मौजूद होता है; यही वह जगह है जहां एक से ज़्यादा पेज वाली साइटें अक्सर अपना ग्लोबल नेविगेशन करती हैं.

अगर आपको इस पेज को web.dev पर देखना है, तो नेविगेशन से जुड़ी कुछ सुविधाओं के बारे में जानें. टाइटल के ऊपर एक ब्रेडक्रंब मौजूद है, "इस पेज पर" टाइटल के बाद कंटेंट टेबल और "एचटीएमएल सीखें" विषय सूची जिसमें, आपकी स्क्रीन की चौड़ाई के हिसाब से, जो हमेशा प्रदर्शित होती है या मेनू बटन पर क्लिक करने से दिखाई जाती है. पेज पर पहला एलिमेंट, #main का छिपा हुआ लिंक है. इससे साइडबार और ब्रेडक्रंब, दोनों लिंक को स्किप किया जा सकता है.

"सीधे कॉन्टेंट पर जाएं" लिंक

पेज पर पहला एलिमेंट इंटरनल लिंक है:

<a href="#main" class="skip-link button">Skip to main</a>

जिसे क्लिक करने पर या फ़ोकस होने पर और उपयोगकर्ता Enter पर क्लिक करता हो, पेज स्क्रोल करके मुख्य कॉन्टेंट पर फ़ोकस करता है: लैंडमार्क <main>, जिसका id main है:

<main id="main">

शायद आपने इस साइट पर यह लिंक कभी न देखा हो, भले ही आपने पिछले सभी सेक्शन पढ़े हों. यह सिर्फ़ तब दिखता है, जब उस पर फ़ोकस होता है:

बेहतर उपयोगिता और सुलभता के लिए, यह ज़रूरी है कि उपयोगकर्ता हर पेज पर दोहराए जाने वाले कॉन्टेंट के ब्लॉक को बायपास कर सकें. स्किप लिंक को इस तरह शामिल किया गया है कि जब कोई कीबोर्ड उपयोगकर्ता tab को लोड होने पर हिट करे, तो वह बिना किसी रुकावट के तेज़ी से साइट के मुख्य कॉन्टेंट पर जा सके मज़बूत लिंकेज के ज़रिए टैब करने की ज़रूरत है. इस पेज पर स्किप लिंक, सभी सेक्शन के साइडबार नेविगेशन और ब्रेडक्रंब नेविगेशन को स्किप करता है. जो उपयोगकर्ता को सीधे पेज के टाइटल पर ले जाते हैं.

ज़्यादातर डिज़ाइनर को पेज पर सबसे ऊपर लिंक का दिखना पसंद नहीं आता. याद रखते समय लिंक को 'व्यू' से छिपाना ठीक है जब लिंक पर फ़ोकस किया जाता है, तब ऐसा तब होता है, जब कीबोर्ड का इस्तेमाल करने वाले किसी व्यक्ति को पेज पर मौजूद लिंक पर क्लिक करना होता है. ऐसे में, वह लिंक सभी लोगों को दिखना चाहिए. .visually-hidden:not(:focus):not(:active) से मिलते-जुलते सिलेक्टर का इस्तेमाल करके, सिर्फ़ गैर-फ़ोकस और ऐक्टिव मोड में कॉन्टेंट छिपाएं.

लिंक के टेक्स्ट में "मुख्य पेज पर जाएं" लिखा हो. यह लिंक का ऐक्सेस किया जा सकने वाला नाम है. यह एक तकनीकी साइट है, और उपयोगकर्ता को शायद "मुख्य" का मतलब है. सभी लिंक टेक्स्ट की तरह, ऐक्सेस किए जा सकने वाले नाम से साफ़ तौर पर पता चलना चाहिए कि लिंक, उपयोगकर्ता को कहां ले जाता है. लिंक का टारगेट पेज का मुख्य कॉन्टेंट होता है. इसकी जांच करने के लिए, पेज लोड होने पर, "सीधे मुख्य पर जाएं" टैब पर जाएं लिंक. इसके बाद, यह पक्का करने के लिए Enter दबाएं कि वह "जंप" है पेज पर ले जाया जाता है.

कॉन्टेंट का टेबल

स्किप-टू-कॉन्टेंट लिंक, मुख्य कॉन्टेंट को स्क्रोल करके दिखाता है. पहला एलिमेंट, इस सेक्शन के टाइटल के साथ <h1> हेडिंग है. इस मामले में, <h1>Marking up navigation</h1>. मुख्य हेडिंग के बाद टैगलाइन है. साथ ही, कॉन्टेंट के बारे में कम शब्दों में जानकारी दी गई है ट्यूटोरियल. कोड बेस में विषय सूची नेविगेशन हेडिंग के पहले या बाद में आता है या नहीं, यह आपके ब्राउज़र की चौड़ाई पर निर्भर करता है.

अगर आपके ब्राउज़र की चौड़ाई 80em से ज़्यादा है, तो मार्कअप में विषय सूची हेडिंग से पहले आती है. साथ ही, यह नीचे दी गई टेबल की तरह होती है (मार्कअप को आसान बनाने के लिए क्लास के नाम हटा दिए गए हैं):

<nav aria-label="On this page">
  <div>On this page</div>
  <div>
    <ul>
      <li>
        <a href="#skip">Skip to content link</a>
      </li>
      <li>
        <a href="#toc">Table of contents</a>
      </li>
      <li>
        <a href="#bc">Page breadcrumbs</a>
      </li>
      <li>
        <a href="#ln">Local navigation</a>
      </li>
      <li>
        <a href="#global">Global navigation</a>
      </li>
    </ul>
  </div>
</nav>

नेविगेशन के सेक्शन के लिए <nav> सबसे अच्छा एलिमेंट है: यह स्क्रीन रीडर और सर्च इंजन को अपने-आप सूचना देता है सेक्शन में navigation की भूमिका है, जो कि एक लैंडमार्क भूमिका है.

इसमें aria-label एट्रिब्यूट शामिल है नेविगेशन के मकसद के बारे में कम शब्दों में जानकारी देता है. इस मामले में, क्योंकि एट्रिब्यूट की वैल्यू पेज पर दिखने वाला टेक्स्ट हो, तो aria-labelledby का इस्तेमाल करना बेहतर होगा ताकि टेक्स्ट का रेफ़रंस दिया जा सके.

हम बिना सिमैंटिक <div> को पैराग्राफ़ <p> में बदल सकते हैं. इसके बाद, हम इसमें id जोड़ सकते हैं, ताकि इसका इस्तेमाल किया जा सके. इसके बाद, हम aria-labelledby का इस्तेमाल करते हैं:

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>

अतिरिक्तता को कम करने के अलावा, दिखने वाले टेक्स्ट का अनुवाद सेवा की मदद से किया जाता है, जबकि एट्रिब्यूट की वैल्यू का अनुवाद नहीं किया जा सकता. अगर हो सके, तो अगर ऐसा टेक्स्ट मौजूद है जो सही लेबल देता है, तो एट्रिब्यूट टेक्स्ट के बजाय उसे प्राथमिकता दें.

यह नेविगेशन विषय सूची है. अगर आपको aria-label का इस्तेमाल करना है, तो दिखने वाले टेक्स्ट को दोहराने के बजाय यह जानकारी दें:

<nav aria-label="Table of Contents">
  <p>On this page</p>

किसी एलिमेंट को ऐक्सेस किया जा सकने वाला नाम देते समय, उसका नाम शामिल न करें. स्क्रीन रीडर से उपयोगकर्ता को यह जानकारी मिल जाती है. उदाहरण के लिए, <nav> एलिमेंट का इस्तेमाल करते समय, "नेविगेशन" शामिल न करें; सिमैंटिक एलिमेंट का इस्तेमाल करते समय, यह जानकारी शामिल की जाती है.

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

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>
  <ul role="list">
    <li>
      <a href="#skip">Skip to content link</a>
    </li>
    <li>
      <a href="#toc">Table of contents</a>
    </li>
    <li>
      <a href="#bc">Page breadcrumbs</a>
    </li>
    <li>
      <a href="#ln">Local navigation</a>
    </li>
    <li>
      <a href="#global">Global navigation</a>
    </li>
  </ul>
</nav>

अगर आपके ब्राउज़र की चौड़ाई 80em से कम है, तो "इस पेज पर" विजेट शीर्षक और टैगलाइन के नीचे है. ऐसा करने के लिए, मीडिया क्वेरी के आधार पर, दो कॉन्टेंट टेबल के नेविगेशन कॉम्पोनेंट और एक या दूसरे को सीएसएस display: none; की मदद से छिपाया जाता है.

अगर एक जैसे दो विजेट को सिर्फ़ एक दिखाना है, तो वह एंटी-पैटर्न है. अतिरिक्त बाइट बहुत कम होती हैं. एचटीएमएल कॉन्टेंट को इससे छिपाया जा रहा है सीएसएस display: none का इस्तेमाल करने वाले सभी उपयोगकर्ताओं के लिए सही है. समस्या यह है कि चौड़ी स्क्रीन पर, विषय सूची #main से पहले आती है; छोटी स्क्रीन पर, विषय सूची #main में नेस्ट की गई होती है. सीधे कॉन्टेंट पर जाने के लिए कीबोर्ड का इस्तेमाल करना चौड़ी स्क्रीन पर कॉन्टेंट दिखेगा. उपयोगकर्ताओं को कॉन्टेंट का जवाब देने और जगह बदलने की आदत होती है. ऐसा तब होता है, जब वे डिवाइस या ताकि वे फ़ॉन्ट का साइज़ बढ़ा सकें. हालांकि, उन्हें उम्मीद नहीं होती कि ऐसा करने से टैब का क्रम बदल जाएगा. पेज के लेआउट ऐसे होने चाहिए जिन्हें ऐक्सेस किया जा सके, जिनका अनुमान लगाया जा सके, और पूरी साइट पर एक जैसा कैसे काम करता है. यहां, विषय सूची की जगह का अनुमान नहीं लगाया जा सकता.

पेज के ब्रेडक्रंब

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

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

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

const url = new URL("https://web.dev/learn/html/navigation");
const sections = url.hostname + url.pathname.split('/');
// "web.dev,learn,html,navigation"

ब्रेडक्रंब के सेक्शन मौजूदा पेज से वापस होम पेज पर पाथ दिखाते हैं. इसमें हर लेवल के बीच का हिस्सा दिखता है.

हर 'एचटीएमएल जानें' मॉड्यूल पेज पर एक ही ब्रेडक्रंब नेविगेशन होता है. इस प्रक्रिया में HTML लेसन की हैरारकी web.dev में से learn सेक्शन. यह कोड नीचे दिया गया कोड जैसा है. इसमें साफ़ तौर पर जानकारी देने के लिए, क्लास और SVG की जानकारी हटा दी गई है:

<nav aria-label="breadcrumbs">
  <ul role="list">
    <li>
      <a href="/">
        <svg aria-label="web.dev" role="img">
          <use href="#webDevLogo" />
        </svg>
      </a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">Learn HTML!</a>
    </li>
  </ul>
  <share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
    <svg aria-label="share" role="img">
      <use href="#shareIcon" />
    </svg>
    <span>Share</span>
  </share-action>
</nav>

यह ब्रेडक्रंब सबसे सही तरीके अपनाता है. इसमें <nav> एलिमेंट का इस्तेमाल किया गया है, जो कि एक लैंडमार्क भूमिका होती है. इसलिए, सहायक टेक्नोलॉजी ब्रेडक्रंब को पेज पर एक नेविगेशनल एलिमेंट के तौर पर दिखाती है. aria-label के साथ दिया गया "ब्रेडक्रंब" नाम, इसे मौजूदा दस्तावेज़ में मौजूद नेविगेशन लैंडमार्क से अलग करता है.

लिंक के बीच में, सीएसएस के बनाए गए कॉन्टेंट सेपरेटर होते हैं. सेपरेटर, आइटम की दूसरी <li> से शुरू होने वाली हर सूची के पहले आते हैं.

[aria-label^="breadcrumb" i] li + li::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  rotate: 45deg;
  opacity: .8
}

स्क्रीन रीडर किसी चीज़ को "देख" नहीं पाएंगे सबसे सही तरीका है: ब्रेडक्रंब लिंक के बीच बांटने वाले सेपरेटर को स्क्रीन रीडर से छिपाया जाना चाहिए. उनके बैकग्राउंड में काफ़ी कंट्रास्ट होना चाहिए, जो सामान्य टेक्स्ट जैसा ही होना चाहिए.

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

आम तौर पर, किसी ब्रेडक्रंब में होम पेज के लिंक में "होम" लिखा होना चाहिए होना चाहिए, न कि साइट के नाम के साथ क्लिक करें. हालांकि, ब्रेडक्रंब दस्तावेज़ में सबसे ऊपर होता है और पेज पर सिर्फ़ लोगो ही दिखता है, इसलिए इसे समझने में मदद मिलती है कि इस एंटी-पैटर्न का इस्तेमाल क्यों किया गया.

आखिरी एलिमेंट, कस्टम <share-action> एलिमेंट है. सेक्शन 15 में, कस्टम एलिमेंट के बारे में चर्चा की गई है. हालांकि, यह कस्टम एलिमेंट ब्रेडक्रंब का हिस्सा नहीं हो सकता है, लेकिन <nav> में किसी अलग एलिमेंट को शामिल करना ठीक है, बशर्ते सभी पेजों पर एक जैसा शामिल किया गया हो.

वर्तमान पेज

इस पेज पर, मौजूदा पेज, "नेविगेशन" को ब्रेडक्रंब में शामिल नहीं किया जाता. जब मौजूदा पेज किसी पेज में ब्रेडक्रंब के लिए, टेक्स्ट कोई लिंक नहीं होना चाहिए और aria-current="page" को वर्तमान पेज के सूची आइटम. जब इसे शामिल नहीं किया जाता, तो यह बताना उपयोगी होता है कि इसके बाद आने वाला शीर्षक, मौजूदा पेज का आइकन या अन्य प्रतीक.

अगर डिज़ाइन में बदलाव होता है, तो ब्रेडक्रंब के किसी दूसरे वर्शन का इस्तेमाल किया जा सकता है:

<nav aria-label="breadcrumbs">
  <ol role="list">
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">Learn HTML!</a>
    </li>
    <li aria-current="page">
      Navigation
    </li>
  </ol>
</nav>

ब्रेडक्रंब, लीनियर स्टेप के लिए नहीं होते हैं. उदाहरण के लिए, मौजूदा पेज पर जाने के लिए उपयोगकर्ता के इस्तेमाल किए गए पाथ की सूची या किसी रेसिपी में इस पॉइंट तक ले जाने वाले चरणों की सूची को <nav> में नेस्ट किया जा सकता है, लेकिन इसे ब्रेडक्रंब के तौर पर लेबल नहीं किया जाना चाहिए.

स्थानीय नेविगेशन

इस पेज पर एक और नेविगेशनल कॉम्पोनेंट मौजूद है. अगर आप चौड़ी स्क्रीन पर हैं, तो बाईं ओर आपको "एचटीएमएल सीखें" लोगो, खोज बार, और 'एचटीएमएल सीखें' के 20 सेक्शन के लिंक शामिल होंगे. हर लिंक में चैप्टर नंबर, सेक्शन का टाइटल और उन सेक्शन की दाईं ओर मौजूद सही के निशान का इस्तेमाल करें जिन्हें आपने पहले देखा है—यह विकल्प तब हो सकता है, जब आप नेविगेट करके वापस आ गए हों. 'एचटीएमएल सीखें' में मौजूद सभी सेक्शन के लिंक, खोज और लोकल हेडर के साथ-साथ जगह के हिसाब से नेविगेशन में मौजूद होते हैं.

अगर इस साइट को किसी टैबलेट या मोबाइल डिवाइस से खोला जा रहा है या आपकी स्क्रीन छोटी है, तो इस पेज को लोड करने पर साइडबार छिप जाता है. आपके पास इसे सबसे ऊपर मौजूद नेविगेशन बार में मौजूद हैमबर्गर मेन्यू से दिखने का विकल्प है. हां, हेडर, पसंद के मुताबिक बनाया गया <web-header> एलिमेंट है, जिसमें role="navigation" सेट है.

चौड़ी स्क्रीन पर स्थायी लोकल नेविगेशन और छोटी स्क्रीन पर लोकल नेविगेशन के बीच मुख्य अंतर, उस वर्शन पर 'बंद करें' बटन का डिसप्ले है जिसे छिपाया जा सकता है. यह आइकॉन, display: none; वाली चौड़ी स्क्रीन पर छिपा है.

इस दस्तावेज़ का लिंक, सेक्शन 010, लोकल नेविगेशन में मौजूद अन्य लिंक से थोड़ा अलग दिखता है. इससे, देख सकने वाले लोगों को यह पता चलता है कि यह मौजूदा पेज है. यह विज़ुअल अंतर सीएसएस की मदद से बनाया गया है. मौजूदा पेज की पहचान, aria-current="page" एट्रिब्यूट से भी की जाती है. इससे सहायक टेक्नोलॉजी को पता चलता है कि यह मौजूदा पेज का लिंक है. इस लोकल नेविगेशन में इस सूची आइटम का एचटीएमएल इसके समान है:

<li>
  <a aria-current="page" href="/learn/html/navigation" data-complete="true">
    <span>010</span>
    <span>Navigation</span>
    <svg aria-label="Check" role="img">
      <use href="#checkmark" />
    </svg>
  </a>
</li>

अगर आपने इस पेज को पहली बार विज़िट किया है, तो आपको सही का निशान नहीं दिखेगा. अगर आपने पहले यह पेज विज़िट किया है, data-complete कस्टम एट्रिब्यूट को true पर सेट किया गया है और सही का निशान दिखेगा. सही का निशान शामिल है लेकिन सीएसएस, हर लिंक में उन उपयोगकर्ताओं के चेकबॉक्स को छिपा देती है जो display: none के साथ इस पेज पर पहले नहीं आए हैं. ऐसा, data-complete="true" विशेषता और मान:

.course .stack-nav a:not([data-complete="true"]) svg {
  display: none;
}

जब display को none के बजाय किसी अन्य पर सेट किया जाता है, तो role सहायक टेक्नोलॉजी को यह बताता है कि इनलाइन SVG एक इमेज है, और aria-label, <img> पर alt एट्रिब्यूट के तौर पर काम करेगा.

ग्लोबल नेविगेशन

ग्लोबल नेविगेशन ऐसा नेविगेशन सेक्शन है जो वेबसाइट के टॉप-लेवल पेजों पर ले जाता है. यह साइट के हर पेज पर एक जैसा होता है. किसी साइट का ग्लोबल नेविगेशन टैब भी हो सकता है, जो नेस्ट किए गए लिंक की ऐसी सूचियां खोलते हैं जो किसी साइट के सभी सब-सेक्शन या अन्य मेन्यू से लिंक होती हैं. इसमें शीर्षक वाले सेक्शन, बटन, और Search विजेट शामिल हो सकते हैं. इन अतिरिक्त सुविधाओं की ज़रूरत नहीं है. ज़रूरी है कि नेविगेशन हर पेज पर दिखता है और हर पेज पर एक जैसा होता है; वर्तमान पेज के किसी भी लिंक पर aria-current="page" के साथ.

ग्लोबल नेविगेशन ऐप्लिकेशन या वेबसाइट पर कहीं भी यात्रा करने का एक समान साधन उपलब्ध कराता है. Google के पास वैश्विक स्तर पर नेविगेशन पर क्लिक करें. सिर्फ़ Yahoo! करता है. सभी मुख्य Yahoo! प्रॉपर्टी की अलग-अलग स्टाइल होती हैं, तो ज़्यादातर सेक्शन एक जैसे होते हैं.

खबरों और स्पोर्ट्स के ग्लोबल नेविगेशन हेडर का कॉन्टेंट एक जैसा है. हालांकि, इस आइकॉन से पता चलता है कि उपयोगकर्ता मौजूदा समय में खेल-कूद में इतना कंट्रास्ट नहीं होता कि दर्शक उसे ऐक्सेस कर सकें; यहां तक कि कम दृष्टि वाले विज़िटर को भी. दोनों सेक्शन में ग्लोबल जिसमें सेक्शन के हिसाब से लोकल नेविगेशन की सुविधा है.

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

इस पेज के फ़ुटर में तीन अतिरिक्त <nav> एलिमेंट हैं: फ़ुटर नेविगेशन, Google Developers, और शर्तें और नीतियां, जिसमें हर एक का लिंक होता है. फ़ुटर नेविगेशन में, GitHub पर web.dev में योगदान देने का तरीका बताया गया है. यह शिक्षा से जुड़ा ऐसा अन्य कॉन्टेंट है जिसे GitHub web.dev के बाहर Google और बाहरी "कनेक्ट करने का तरीका" लिंक.

<footer> में ये तीन नेविगेशन, <nav> एलिमेंट हैं. aria-labelइनका इस्तेमाल करके इन लैंडमार्क रोल को ऐक्सेस किया जा सकता है. हमने जो नेविगेशन देखे हैं वे सभी ऐसे लिंक हैं जो किसी नेविगेशन में मौजूद सूची में नेस्ट किए गए हैं. हमने आपके लिए वह सारी जानकारी दे दी है जिसकी ज़रूरत आपको अपने नेविगेशन बनाने के लिए है. इसके बाद, हम डेटा टेबल को मार्क अप करने के बारे में जानेंगे.

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

नेविगेशन के बारे में अपनी जानकारी को परखें.