नेविगेशन

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

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

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

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

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

पेज पर पहला एलिमेंट, अंदरूनी लिंक होता है:

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

जिस पर क्लिक किया जाता है या फ़ोकस Enter पर होता है. उपयोगकर्ता 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"

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

'एचटीएमएल मॉड्यूल के बारे में जानकारी' वाले हर पेज का ब्रेडक्रंब नेविगेशन एक जैसा होता है. यह web.dev के learn सेक्शन में, HTML लेसन की हैरारकी दिखाता है. यह कोड नीचे जैसा ही है. साफ़ तौर पर जानकारी देने के लिए, क्लास और 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 सेक्शन में से हर एक के लिंक मौजूद होंगे. हर लिंक में चैप्टर नंबर, उस सेक्शन का टाइटल, और उन सेक्शन की दाईं ओर मौजूद चेकमार्क होता है जिन्हें आपने पहले भी देखा है. अगर आप नेविगेट करके वापस आ गए हैं, तो यह लिंक हो सकता है. खोज और स्थानीय हेडर के साथ, HTML सीखें में सभी सेक्शन के लिंक स्थान नेविगेशन होते हैं.

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

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

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

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

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

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

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

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

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

आपने जो सीखा है उसकी जांच करें

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