W HTML5 Główna nawigacja powinna znajdować się wewnątrz czy na zewnątrz elementu?
W HTML5 wiem, że <nav> może być używany zarówno wewnątrz, jak i poza głównym elementem strony <header>. W przypadku stron internetowych posiadających zarówno nawigację wtórną, jak i główną, wydaje się powszechne włączenie nawigacji wtórnej jako elementu <nav> wewnątrz elementu masztu <header>, a głównej nawigacji jako elementu <nav> poza elementem masztu <header>. Jednakże, jeśli strona nie posiada dodatkowej nawigacji, wydaje się powszechne włączenie głównej nawigacji w elemencie <nav> wewnątrz głowicy <header> element.
Jeśli zastosuję się do tych przykładów, moja struktura treści będzie oparta na włączeniu lub wykluczeniu wtórnej nawigacji. Wprowadza to powiązanie między treścią a stylem, który wydaje się niepotrzebny i nienaturalny.
Czy jest lepszy sposób, aby nie przenosić głównej nawigacji z wnętrza Na zewnątrz elementu masztu <header> w oparciu o włączenie lub wyłączenie nawigacji wtórnej?
Nawigacja główna i pomocnicza Przykład
<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 jest przykładową stroną, która podąża za powyższym wzorcem.
Tylko Główny Przykład Nawigacji
<header>
<h1>Website Title</h1>
<nav>
<!-- Main Navigation inside <header> -->
<ul>
<li></li>
</ul>
</nav>
</header>
Keyzo.co.uk jest przykładową stroną, która podąża za powyższym wzorcem.
Fragmenty z przedstawiamy HTML5 - Dodano 02-Feb-11, 7:38 AM
przedstawiamy HTML5 Bruce Lawson i Remy Sharp mają to do powiedzenia na temat temat:
Nagłówek może również zawierać nawigację. Może to być bardzo przydatne do nawigacji w całej witrynie, szczególnie w witrynach opartych na szablonach, gdzie cały element
<header>może pochodzić z pliku szablonu.Oczywiście nie jest wymagane, aby {[2] } były w
<header>.Jeśli zależy w dużej mierze od tego, czy uważasz, że nawigacja na całej stronie należy do nagłówka witryny, a także pragmatycznych rozważań na temat łatwości stylizacja.
Na podstawie tego ostatniego zdania wydaje się, że Bruce Lawson-autor rozdziału, z którego pochodzą te fragmenty-przyznaje, że "pragmatyczne rozważania na temat łatwości stylizacji" dają powiązanie między treścią a stylem.
5 answers
To zależy wyłącznie od Ciebie. Możesz umieścić je w nagłówku lub nie, o ile elementy w nich są tylko wewnętrznymi elementami nawigacji (tj. nie Linkuj do zewnętrznych stron, takich jak konto na Twitterze lub facebook), to jest w porządku.
Mają tendencję do umieszczania ich w nagłówku po prostu dlatego, że często do tego dochodzi nawigacja, ale nie jest ona ustawiona w kamieniu.
Możesz przeczytać więcej na ten temat na HTML5 Doctor .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-02-02 09:12:05
Trochę niejasne, czy pytasz o opinie, np. "często robi się xxx" lub rzeczywistą regułę, więc zamierzam pochylić się w kierunku zasad.
Przykłady, które przytaczasz, wydają się oparte na przykładach w specyfikacji dla elementu nav . Pamiętaj, że spec ciągle jest poprawiany, a zasady są czasami zawiłe, więc zaryzykuję, że wiele osób może raczej robić to, co podano, niż interpretować. Pokazujesz dwa Oddzielne przykłady z różnymi zachowania, więc tylko tyle można w nim przeczytać. Czy któraś z tych stron ma również przeciwną sytuację sub / nav, a jeśli tak, to jak sobie z tym radzą?
Najważniejsze jednak, że nie ma nic w specyfikacji mówi albo jest sposób, aby to zrobić. Jednym z celów HTML5 było to, aby było bardzo jasne [to dla porównania] o semantyce, wymaganiach itp. więc pominięcie jest warte odnotowania. Z tego co widzę przykłady są od siebie niezależne i równie ważne we własnym kontekście wymagań dotyczących układu itp.
Warunkowa pozycja źródła nav jest trochę głupia (kolejna czerwona flaga). Po prostu wybierz metodę i idź z nią.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-02-02 08:24:25
Nie lubię umieszczać nav w nagłówku . Moje rozumowanie brzmi:
Logika
Nagłówek zawiera wstępne informacje o dokumencie. nav jest menu, które łączy się z innymi dokumentami. Moim zdaniem oznacza to, że zawartość nav należy do strony, a nie do dokumentu. Wyjątkiem byłoby, gdyby NAV posiadał linki do przodu.
Dostępność
Lubię umieszczać menu na końcu kodu źródłowego, a nie początku. Używam CSS, aby wysłać go do góry ekranu komputera lub pozostawić go na końcu dla przeglądarek tekstowych i małych ekranów. Pozwala to uniknąć konieczności przeskoków.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-24 15:29:02
@ IanDevlin ma rację. Zasady MDN mówią co następuje :
"element nagłówka HTML "" definiuje nagłówek strony-zazwyczaj zawierający logo i nazwę witryny oraz ewentualnie poziome menu..."
Słowo "możliwe" jest kluczem. Dalej mówi się, że nagłówek niekoniecznie musi być nagłówkiem witryny. Na przykład możesz dołączyć "nagłówek" na modalu wyskakującym lub na innych modułowych częściach dokumentu, w których znajduje się nagłówek i byłoby to pomocne aby użytkownik na czytniku ekranu wiedział o tym.
To pojęcie dorozumianego korzystania z NAV można go używać wszędzie tam, gdzie jest pogrupowana nawigacja po witrynie, chociaż zwykle pomija się go w sekcji "stopka" dla mini-NAV / ważnych linków do witryny.
Naprawdę sprowadza się do osobistego / zespołowego wyboru. Zdecyduj, co ty i twój zespół czujesz, jest bardziej semantyczne i ważniejsze, a staraj się być konsekwentny. Dla mnie, jeśli nav jest w linii z logo i głównej strony " h1 " to ma sens aby umieścić go w "nagłówku", ale jeśli masz inny wybór projektu, zdecyduj indywidualnie.
Co najważniejsze sprawdź dokumenty i upewnij się, że jeśli zdecydujesz się pominąć lub dołączyć rozumiesz, dlaczego podejmujesz tę konkretną decyzję.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-01 15:48:04
Aby rozwinąć to, co powiedział @ JoshuaMaddox, w obszarze nauki MDN, w sekcji "Wprowadzenie do HTML", podsekcja Dokument i struktura strony mówi (pogrubienie / podkreślenie jest przeze mnie):
Header
Zazwyczaj duży pasek na górze z dużym nagłówkiem i / lub logo. To jest, gdzie główne wspólne informacje o stronie internetowej Zwykle pozostaje z jednej strony do drugiej.
Pasek nawigacji
Linki do głównych działów serwisu; zazwyczaj reprezentowane przez menu przyciski, linki lub zakładki. Podobnie jak nagłówek, ta zawartość zwykle pozostaje spójny z jednej strony na drugą-mający niespójny nawigacja na twojej stronie doprowadzi tylko do zdezorientowania, sfrustrowania użytkowników. wielu projektantów stron internetowych uważa pasek nawigacyjny za część nagłówka, a nie pojedynczego komponentu, ale to nie jest wymóg; w rzeczywistości niektórzy twierdzą również, że posiadanie dwóch odrębnych lepsza dostępność, gdyż czytniki ekranu mogą przeczytaj dwie funkcje lepiej, jeśli są oddzielne .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-21 18:46:57