क्या मुझे अपने <nav> s के अंदर <ul> s और <li> s का उपयोग करना चाहिए?

114

शीर्षक बहुत ज्यादा यह बताते हैं।

अब जब हमारे पास एक समर्पित <nav>टैग है,

क्या इस:

<nav>
  <ul>
    <li><a href="#foo">foo</a></li>
    <li><a href="#bar">bar</a></li>
    <li><a href="#baz">baz</a></li>
  </ul>
</nav>

निम्नलिखित में से कोई भी बेहतर है?

<nav>
  <a href="#foo">foo</a>
  <a href="#bar">bar</a>
  <a href="#baz">baz</a>
</nav>

मेरा मतलब है, यह मानते हुए कि मुझे कुछ CSS पोजिशनिंग / पैडिंग के लिए अतिरिक्त DOM स्तर की आवश्यकता नहीं है, पसंदीदा तरीका क्या है और क्यों?

html html-lists nav

— kikito
स्रोत

यह एक अच्छा सवाल है ... उन टैग्स के साथ जो HTML 4 से कोई मतलब नहीं रखते हैं, क्या पिछली कोई सर्वोत्तम प्रथा लागू होती है?

— 22

63

नौसेना तत्व और सूची अलग-अलग शब्दार्थ जानकारी प्रदान करते हैं:

नौसेना तत्व बताता है कि हम एक प्रमुख नेविगेशन ब्लॉक के साथ काम कर रहे हैं
सूची से पता चलता है कि इस नेविगेशन ब्लॉक के अंदर लिंक वस्तुओं की एक सूची बनाते हैं

पर http://w3c.github.io/html/sections.html#the-nav-element आप देख सकते हैं कि एक नेविगेशन तत्व भी गद्य हो सकता है।

तो हाँ, एक नौसेना तत्व के अंदर एक सूची होने से अर्थ जुड़ता है।

— थॉमस मास
स्रोत

बहुत बहुत धन्यवाद, यह वही है जिसकी मुझे आवश्यकता है! साथ ही, नीचे दिए गए "3 आइटमों की सूची" की घोषणा करने वाले स्क्रीन पाठकों के बारे में रॉबर्ट की टिप्पणी बहुत उपयोगी थी।

— किकिटो

7

उल टैग की तरह लगता है कुछ भी मदद नहीं करता है: css-tricks.com/navigation-in-lists-to-be-or-not-to-be

— psycho brm

2

लगता है लिंक मेरे लिए काम कर रहा है। अनुवर्ती पढ़ने के लिए सुनिश्चित करें, जो सूचियों की घोषणा करता है और कोई सूची आकर्षित नहीं करता है। css-tricks.com/wrapup-of-navigation-in-lists

— RobW

मेरी राय में, <nav>बिना <ul><li>ऐसा लगता है कि इसमें अधिक गतिशील बच्चों के मेनू होंगे। क्या होगा यदि आपके पास कई मेनू सूची हैं जो एक अलग प्रकार और स्थिति में हैं <nav>? मैं करूंगा समूह के रूप में उन मेनू सूचियों <ul><li>में <nav>। तो अगर आपके मेनू नियमित हैं, तो मैं साथ जाऊंगा <ul><li>।

— wonsuc

3

इस बिंदु पर, मैं <ul><li>तत्वों को रखूंगा, कारण यह है कि सभी ब्राउज़र अभी तक HTML5 टैग का समर्थन नहीं करते हैं।

उदाहरण के लिए, मैं <header>टैग का उपयोग करके एक समस्या में भाग गया - क्रोम और एफएफ ने एक आकर्षण की तरह काम किया, लेकिन ओपेरा ने बोर किया।

जब तक सभी ब्राउज़र पूरी तरह से HTML का समर्थन नहीं करते, तब तक मैं उन्हें अंदर से चिपकाऊंगा, लेकिन पीछे की संगतता के लिए पुराने लोगों पर भरोसा करूंगा।

— डेमियन ब्रेख्त
स्रोत

3

ओपेरा और IE जैसे ब्राउज़रों के साथ किसी भी संभव पिछड़े संगतता ब्लंडर्स को कम करने के लिए HTML 5 शिम जावास्क्रिप्ट फ़ाइल ( remysharp.com/2009/01/07/html5-en enable-script ) का उपयोग करें ।

— acconrad

लेकिन तब आपकी साइट गैर-आज्ञाकारी स्क्रिप्टिंग के लिए अनुकूल नहीं है :)

— डेमियन ब्रेख्त

1

आपका मतलब है कि जब तक IE8 बाजार से बाहर नहीं निकलता ... तब तक 2016 तक ...:)

— asime Vidas

@ Criptime - ठीक है :) और जावास्क्रिप्ट बंद करना अब ब्राउज़रों में एक विकल्प नहीं है;)

— डेमियन ब्रेख्त

@ Agent_9191 यह - मैं आज पूरी तरह से आश्चर्यचकित हूं जब मैं सिर्फ यह देखना चाहता था कि कितने लोग अभी भी IE7 पर हैं और क्या अनुमान लगाते हैं - ज्यादातर देशों में IE7 की तुलना में ओपेरा या iPad सफारी जैसे ब्राउज़र पर अधिक लोग हैं। मैं बहुत खुश हूं कि अब मैं IE7 के लिए समर्थन छोड़ सकता हूं! और IE8 जल्दी या बाद में चला जाएगा। यह अंतिम जिद्दी ब्राउज़र है जिसका हमें सामना करना पड़ेगा (IE9 कोड के खिलाफ उतना बुरा नहीं है)।

— कैमिलो मार्टिन

2

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

— इयान डिवालिन
स्रोत

+1 स्क्रीन पाठकों के लिए उल्लेख करने के कारण, navs और as अभी सूचियों जितना ही अच्छा है।

— कैमिलो मार्टिन

2

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

यद्यपि आप कुछ लचीलेपन प्राप्त कर सकते हैं, मेरा मानना है कि यह एक बेहतर विचार है कि मार्कशीट को बेमतलब उल कक्षाओं के साथ न उड़ाया जाए और तत्वों को एक शैली में झपट्टा मारा जाए। और आपके पास कोई बहाना नहीं है: छद्म चयनकर्ताओं के पहले और बाद में: का उपयोग करें।

संपादित करें : मुझे पता चला है कि कुछ ARIA स्क्रीन रीडर सरल एंकर टैग की तुलना में सूचियों का अलग-अलग व्यवहार करते हैं। यदि आपकी वेबसाइट अक्षम लोगों की ओर सक्षम है, तो मैं सूची-आधारित दृष्टिकोण का उपयोग करने पर विचार कर सकता हूं।

— उपयोगकर्ता 14149980 को दर्शाता है
स्रोत

1

नहीं, वे बराबर हैं। याद रखें, एचटीएमएल 5 एचटीएमएल 4 सूचियों के साथ पीछे की ओर संगत है, इसलिए आप उन्हें उसी संबंध में उपयोग करने के लिए स्वतंत्र महसूस कर सकते हैं। व्यापार बंद 2 संस्करण के लिए कम कोड है।

आप ब्राउज़र के संबंध में पश्च संगतता के बारे में चिंतित हैं, तो शामिल करना सुनिश्चित करें इस शिम जैसे टैग की सुविधा प्रदान करने के <nav>लिए और <article>।

— acconrad
स्रोत

8

लिंक की एक सूची अतिरिक्त शब्दार्थ और पहुंच प्रदान करती है (उदाहरण के लिए जब आप नेविगेशन में प्रवेश करते हैं तो स्क्रीन रीडर 'तीन वस्तुओं की सूची' की घोषणा करेंगे)।

— रोबर्टेक

@robertc स्क्रीन्रेडर्स पॉइंट एक बहुत अच्छा है। आपको इसे एक जवाब पर रखना चाहिए था! मैंने इसे सही माना होगा। किसी भी मामले में +1।

— किक्रेटो

1

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

— Phil.Wheeler
स्रोत

1

मैं रखना चाहते हैं <ul><li>, टैग, क्योंकि नए टैग ( <nav>, <section>, <article>और इसी तरह) बस के अधिक अर्थ संस्करण हैं <div>रों।

उसी कारण से आपके पास लिंक का भार नहीं होगा <div>, उन्हें एक <nav>टैग के अंदर संरचित होना चाहिए ।

— whostolemyhat
स्रोत

जिस कारण से मैंने अतीत में एक <div> में बहुत सारे लिंक के बजाय <ul> s का उपयोग किया था वह ठीक था कि <ul> s अधिक अर्थ थे। लेकिन अब <nav> s अधिक अर्थपूर्ण हैं। मैं उलझन में हूं।

— किक्रेटो

2

<Ul> s अभी भी सादे <a> लिंक की तुलना में अधिक अर्थपूर्ण हैं, लेकिन <nav> <div> की तुलना में अधिक अर्थपूर्ण है। <

— Ul

एचटीएमएल लिखते समय शब्दार्थों की परवाह नहीं करना है।

— एंड्रयू मार्शल

1

इस सटीक प्रश्न के बारे में सीएसएस ट्रिक्स पर वास्तव में विस्तृत पोस्ट है। यह स्पष्ट रूप से एक गर्म बहस वाला मुद्दा है; पोस्ट में 200 से अधिक टिप्पणियां हैं।

नेविगेशन में सूचियाँ: होना या न होना (सीएसएस ट्रिक्स, जनवरी 2013)

— Astrotim
स्रोत

यहाँ एक अनुवर्ती लेख है जो उन्होंने लिखा css-tricks.com/wrapup-of-navigation-in-lists

— ग्राहम