HTML5 में, मुख्य नेविगेशन <हेडर> तत्व के अंदर या बाहर होना चाहिए?

Question

HTML5 में, मुझे पता है कि <nav>इसका उपयोग पृष्ठ के मास्टहेड <header>तत्व के अंदर या बाहर किया जा सकता है । द्वितीयक और मुख्य नेविगेशन दोनों वाली वेबसाइटों के लिए, <nav>मास्टहेड <header>तत्व के अंदर एक तत्व के रूप में मुख्य नेविगेशन के साथ एक <nav>तत्व के रूप में माध्यमिक नेविगेशन को शामिल करना आम लगता है <header>। हालाँकि, यदि वेबसाइट में द्वितीयक नेविगेशन का अभाव है, तो <nav>मास्टहेड <header>तत्व के भीतर मुख्य नेविगेशन को शामिल करना आम बात है ।

यदि मैं इन उदाहरणों का पालन करता हूं, तो मेरी सामग्री संरचना द्वितीयक नेविगेशन के समावेश या बहिष्करण पर आधारित होगी। यह सामग्री और शैली के बीच एक युग्मन का परिचय देता है जो अनावश्यक और अप्राकृतिक लगता है।

क्या कोई बेहतर तरीका है ताकि मैं मुख्य नेविगेशन को बाहरी नेविगेशन <header>के समावेश या बहिष्करण के आधार पर मास्टहेड तत्व के बाहर से अंदर नहीं ले जाऊं ?

मुख्य और माध्यमिक नेविगेशन उदाहरण

<header>
    <nav>
        <!-- Secondary Navigation inside <header> -->
        <ul>
            <li></li>
        </ul>
    </nav>
    <h1>Website Title</h1>
</header>
<nav>
    <!-- Main Navigation outside <header> -->
    <ul>
        <li></li>
    </ul>
</nav>

OnlineDegrees.org एक उदाहरण साइट है जो उपरोक्त पैटर्न का अनुसरण करती है।

मुख्य केवल नेविगेशन उदाहरण

<header>
    <h1>Website Title</h1>
    <nav>
        <!-- Main Navigation inside <header> -->
        <ul>
            <li></li>
        </ul>
    </nav>
</header>

Keyzo.co.uk एक उदाहरण साइट है जो उपरोक्त पैटर्न का अनुसरण करती है।

HTML5 पेश करने के कुछ अंश - 02-फरवरी -11, 7:38 पूर्वाह्न में जोड़े गए

ब्रूस लॉसन और रेमी शार्प द्वारा एचटीएमएल 5 का परिचय इस विषय के बारे में कहना है:

हेडर में नेविगेशन भी हो सकता है। यह साइट-वाइड नेविगेशन के लिए बहुत उपयोगी हो सकता है, विशेष रूप से टेम्पलेट-संचालित साइटों पर जहां संपूर्ण <header>तत्व टेम्पलेट फ़ाइल से आ सकता है।

बेशक, यह आवश्यक नहीं है कि में <nav>हो <header>।

यदि आप बहुत हद तक इस बात पर निर्भर करते हैं कि आप मानते हैं कि साइट-वाइड नेविगेशन साइट-वाइड हेडर के अंतर्गत आता है और स्टाइल की आसानी के बारे में व्यावहारिक विचार भी।

उस अंतिम वाक्य के आधार पर, यह प्रतीत होता है कि ब्रूस लॉसन-अध्याय के लेखक उन अंशों से मानते हैं - "स्टाइल की आसानी के बारे में व्यावहारिक विचार" सामग्री और शैली के बीच एक युग्मन उत्पन्न करते हैं।

Comments

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

— uSeRnAmEhAhAhAhAhAhAAA

Answer 1

यह पूरी तरह से आप पर निर्भर है। आप या तो उन्हें हेडर में डाल सकते हैं या नहीं, जब तक कि उनके भीतर के तत्व केवल आंतरिक नेविगेशन तत्व हैं (यानी ट्विटर या फेसबुक अकाउंट जैसी बाहरी साइटों से लिंक न करें) तो यह ठीक है।

वे एक हेडर में बस रखने के लिए जाते हैं क्योंकि यही वह जगह है जहां नेविगेशन अक्सर जाता है, लेकिन यह पत्थर में सेट नहीं है।

आप एचटीएमएल 5 डॉक्टर पर इसके बारे में अधिक पढ़ सकते हैं ।

Comments

आप यह क्यों कहते हैं कि "जब तक उनके भीतर के तत्व केवल आंतरिक नेविगेशन तत्व हैं (यानी बाहरी साइटों जैसे ट्विटर या फेसबुक अकाउंट से लिंक न करें) तो ठीक है?"

— मैथ्यू रैनकिन

@ मैथ्यू क्योंकि नौसेना तत्व केवल उस साइट के चारों ओर नेविगेशन के लिए है। मैं बस स्पष्ट किया जा रहा था सब है।

— इयान डेविन 16

@MatthewRankin एक <nav>तत्व के अंदर एक एंकर पर क्लिक करने के लिए क्या झटका होगा , केवल पूरी तरह से अलग नेविगेशन के साथ एक नए पृष्ठ पर भेजा जाएगा। बाहरी साइटों के एंकर के लिए अपने स्वयं के सच्चे रिश्ते के साथ, rel="nofollow"लिंक के लिए विशेषता भी याद रखें ।

— एंथनी रटलेज

मुझे पता है कि यह पुराना है ... उप-डोमेन के लिंक के बारे में क्या? उदाहरण के लिए एक वेबसाइट जिसमें विभिन्न साइटें हैं (प्रस्तुति साइट, सेवा साइट, साइट, आदि ...), उन सभी की संरचना अलग है। मैं जो कर रहा हूं, वह लिंक <nav>तत्व के अंदर नहीं बल्कि तत्व के अंदर है <ul>, इसे इस तरह से स्टाइल कर रहा है जो मुख्य नेविगेशन सूची का हिस्सा नहीं है। मोबाइल संस्करण होने के अपवाद के साथ, लिंक को एक ही सूची में दिखाई देना है ... वैसे भी बटन वर्णनात्मक है यह जानने के लिए कि आप कहीं और जा रहे हैं ...

— Chazy Chaz

Answer 2

यह थोड़ा अस्पष्ट है कि क्या आप राय के लिए पूछ रहे हैं, जैसे। "यह xxx करना आम है" या एक वास्तविक नियम है, इसलिए मैं नियमों की दिशा में झुक जा रहा हूं।

आप जिन उदाहरणों का हवाला देते हैं , वे नव तत्व के लिए उदाहरण के आधार पर प्रतीत होते हैं । याद रखें कि कल्पना का जुड़ाव बना रहता है और नियम कभी-कभी जटिल हो जाते हैं, इसलिए मैं उद्यम करूंगा कि बहुत से लोग सिर्फ व्याख्या के बजाय जो कर सकते हैं वह करते हैं। आप अलग- अलग व्यवहार के साथ दो अलग-अलग उदाहरण दिखा रहे हैं , इसलिए केवल इतना है कि आप इसे पढ़ सकते हैं। क्या उन साइटों में से किसी में भी विरोधी उप / नौसेना की स्थिति है, और यदि ऐसा है तो वे इसे कैसे संभालते हैं?

सबसे महत्वपूर्ण बात, हालांकि, यह कहते हुए कल्पना में कुछ भी नहीं है कि यह करने का तरीका है। HTML5 के साथ लक्ष्यों में से एक बहुत स्पष्ट होना चाहिए [यह तुलना के लिए] शब्दार्थ, आवश्यकताओं आदि के बारे में है, इसलिए चूक के लायक है। जहाँ तक मैं देख सकता हूँ, उदाहरण एक दूसरे से स्वतंत्र हैं और लेआउट आवश्यकताओं, आदि के अपने स्वयं के संदर्भ में समान रूप से मान्य हैं।

नौसेना के स्रोत की स्थिति का होना मूर्खतापूर्ण (एक और लाल झंडा) की तरह है। बस एक विधि चुनो और उसके साथ जाओ।

Answer 3

मुझे हेडर में नेवी डालना पसंद नहीं है । मेरा तर्क है:

तर्क

शीर्ष लेख दस्तावेज़ के बारे में परिचयात्मक जानकारी शामिल है। एनएवी एक मेनू है कि अन्य दस्तावेज़ों के लिंक है। मेरे दिमाग में इसका मतलब है कि दस्तावेज़ की बजाय नौसेना की सामग्री साइट से संबंधित है। एक अपवाद होगा यदि एनएवी ने आगे लिंक रखे।

सरल उपयोग

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

Comments

ध्यान रखें कि लिंक छोड़ें मेनू को छोड़ने के लिए विकल्प देते हैं, जबकि अंत में डालने से स्किपिंग (यानी नेविगेट) नहीं करने का विकल्प नहीं मिलता है - इस प्रकार आप अंत तक ठीक से नेविगेट करने में सक्षम होने तक इंतजार करने के लिए मजबूर होंगे। , सही?

— जूलिक्स

@ जूलिक्स के बिंदु पर जारी रखने के लिए, नौसेना को अंत में रखें, लेकिन शुरुआत में इसे प्रस्तुत करने से यह दस्तावेज़ के माध्यम से देखे जाने वाले उपयोगकर्ताओं के लिए अजीब हो जाएगा।

— जेसन टी फेदरिंगम

Answer 4

@IanDevlin सही है। एमडीएन के नियम निम्नलिखित कहते हैं :

"HTML हैडर एलीमेंट" "एक पेज हेडर को परिभाषित करता है - जिसमें आमतौर पर लोगो और साइट का नाम और संभवतः एक क्षैतिज मेनू होता है ..."

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

यह एनएवी के निहित उपयोग की शर्तों के अनुसार आप इसे कहीं भी उपयोग कर सकते हैं समूहित साइट नेविगेशन, हालांकि यह आमतौर पर मिनी-नेवी / महत्वपूर्ण साइट लिंक के लिए "पाद" अनुभाग से छोड़ा गया है।

वास्तव में यह व्यक्तिगत / टीम की पसंद के लिए नीचे आता है। यह तय करें कि आप और आपकी टीम क्या महसूस करती है और अधिक अर्थपूर्ण और अधिक महत्वपूर्ण है और सुसंगत होने का प्रयास करें। मेरे लिए, अगर नौसेना लोगो और मुख्य साइट के "h1" के साथ इनलाइन है, तो इसे "हेडर" में डालने के लिए समझ में आता है, लेकिन अगर आपके पास एक अलग डिजाइन विकल्प है, तो केस के आधार पर केस तय करें।

सबसे महत्वपूर्ण बात यह है कि डॉक्स की जाँच करें और सुनिश्चित करें कि यदि आप छोड़ना चाहते हैं या आप यह समझना चाहते हैं कि आप उस विशेष निर्णय को क्यों कर रहे हैं।

Answer 5

MDJ लर्निंग एरिया में @JoshuaMaddox ने जो कहा, उस पर विस्तार करने के लिए, "परिचय टू HTML" सेक्शन के तहत, डॉक्यूमेंट और वेबसाइट स्ट्रक्चर सब-सेक्शन कहता है (मेरे द्वारा बोल्ड / जोर दिया गया है):

हैडर

आमतौर पर एक बड़ी हेडिंग और / या लोगो के साथ शीर्ष पर एक बड़ी पट्टी। यह वह जगह है जहां एक वेबसाइट के बारे में मुख्य आम जानकारी आमतौर पर एक वेबपेज से दूसरे में रहती है।

नेविगेशन बार

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

Comments

मैं इस बात से सहमत होना चाहता हूं कि एक <nav>पृष्ठ में एक संरचित उथला है जो <nav>कि गहरे से घने की तुलना में अधिक सुलभ हो सकता है। हालाँकि, वह निर्णय किस आधार पर किया जा रहा है? स्क्रीन रीडर वैसे भी घर पर <nav>और <a>टैग में जा रहे हैं । महत्वपूर्ण कारक HTML का संरचनात्मक क्रम है। अगला, जवाबदेही। प्राथमिक <nav>(या कोई भी <nav>) का सीधा बच्चा बनाता है<body> करना आसान है जिससे हेरफेर करना आसान हो जाता है? क्या यह वैध HTML है? एक <nav>है सामग्री सेक्शनिंग , और इस तरह एक प्राकृतिक फिट एक के भीतर रहने के लिए है सेक्शनिंग जड़ की तरह, <body>। W3C एचटीएमएल 5

— एंथनी रूटलेज