एकाधिक <nav> टैग


97

क्या हम html5 में एक ही पृष्ठ पर कई टैग का उपयोग कर सकते हैं?

मैंने इस लेख को Zeldman.com पर पढ़ा है लेकिन यह मेरे लिए पूरी तरह से स्पष्ट नहीं है

अर्थात

<header><nav>links here</nav></header>

<footer><nav>links here</nav></footer>

1
भूमिका = 'मुख्य' आपकी साइट की मुख्य सामग्री w3.org/TR/wai-aria/roles#main की पहचान करने के लिए है , और ब्लॉगरोल के लिए कोई भूमिका नहीं है। मुझे लगता है कि आप microdata - schema.org का उपयोग कर रहे हैं ।
एंड्रयू लुहृंग

जवाबों:


142

हाँ बिल्कुल। आप एक से अधिक हो सकता है header, navऔर footerटैग बिना जुर्माना।

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


2
कैसे एक ही पाद में कई नौसेना के बारे में?
igasparetto

4
@igasparetto पूरी तरह से मान्य है, खासकर यदि आप इसका उपयोग उस तरीके से कर रहे हैं जो सामग्री की संरचना का प्रतिनिधित्व करता है न कि केवल स्टाइल की सुविधा के लिए।
Coreyward

क्या नेविगेशन के प्रकारों के लिए मानक लेबल का उपयोग किया जाना चाहिए, इस पर कोई मार्गदर्शन है? विशेष रूप से: मुख्य नेविगेशन, उप-दायित्व, उपयोगिता नेविगेशन (जैसे त्वरित लिंक) और पाद नेविगेशन? इसके अलावा, अगर <nav>पहले से ही एक <footer>टैग के अंदर है , तो क्या यह फिर से लागू करने के लिए अनावश्यक है aria-label="footer navigation"?
chunk_split

1
@chunk_split मुझे लगता है कि आप एक नया सवाल पूछना बेहतर होगा, हालांकि मुझे यकीन नहीं है कि StackOverflow सही समुदाय है। ARIA विशेषताओं के लिए, भले ही वे निरर्थक प्रतीत हों, उन्हें जोड़ना सुरक्षित है।
Coreyward

3

इसका जवाब है हाँ। तुम एक हो सकता है <nav>और अधिक जानकारी जांच करने के लिए, पाद लेख में टैग MDN <nav>प्रलेखन


एक आधिकारिक लिंक प्रदान करने वाला अच्छा काम। लिंक किए गए पृष्ठ, इसके उपयोग नोट्स में, विशेष रूप से कहा गया है "एक दस्तावेज़ में कई <nav>तत्व हो सकते हैं "।
एड गिब्स

2

हाँ, कई हो रही है <nav> तत्व होना बिल्कुल ठीक है।

आपको बस यह सुनिश्चित करना है कि आप स्क्रीन रीडर का उपयोग करने वाले लोगों के लिए उन्हें अलग पहचान बना रहे हैं। आप प्रत्येक <nav>का उपयोग करके इसे कर सकते हैं aria-label

<nav aria-label=’primary’>
  <ul>
    ...List on links here...
  </ul>
</nav>
<nav aria-label=’secondary’>
  <ul>
    ...List on links here...
  </ul>
</nav>

या, यदि <nav>स्क्रीन पर दिखाई देने वाले पाठ में से एक जिसे लेबलिंग तत्व के रूप में पहचाना जा सकता है, तो आप aria-labelledbyनिम्नानुसार उपयोग कर सकते हैं :

<nav aria-label="Site Menu">
  <ul>
    ...List on links here...
  </ul>
</nav>
<article>
  <h1>Title</h1>
  ...
  <nav aria-labelledby="id-1">
    <h2 id="id-1">
      Related Content
    </h2>
    <ul>
      ...List on links here...
    </ul>
  </nav>
</article>

आप कई नेविगेशन लैंडमार्क का उपयोग करने के बारे में अधिक पढ़ सकते हैं ।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.