Wiem, że w HTML5 <nav>można tego użyć wewnątrz lub na zewnątrz <header>elementu masthead na stronie . W przypadku witryn, które mają zarówno pomocniczą, jak i główną nawigację, często umieszcza się dodatkową nawigację jako <nav>element wewnątrz <header>elementu masthead , a główną nawigację jako <nav>element poza mastheadem <header>. Jeśli jednak w witrynie brakuje dodatkowej nawigacji, często umieszcza się główną nawigację w <nav>elemencie elementu masthead <header>.

Jeśli będę postępować zgodnie z tymi przykładami, moja struktura treści będzie oparta na włączeniu lub wykluczeniu dodatkowej nawigacji. Wprowadza to sprzężenie między treścią a stylem, które wydaje się niepotrzebne i nienaturalne.

Czy istnieje lepszy sposób, aby nie przenosić głównego elementu nawigacyjnego z wewnątrz na zewnątrz <header>elementu masthead na podstawie włączenia lub wyłączenia dodatkowej nawigacji?

Przykład nawigacji głównej i pomocniczej

<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 to przykładowa witryna, która jest zgodna z powyższym wzorcem.

Przykład głównej nawigacji

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

Przykładowa witryna Keyzo.co.uk jest zgodna z powyższym wzorcem.

Fragmenty z Wprowadzenie do HTML5 - dodane 11 lutego o godz. 7:38

Wprowadzenie do HTML5 przez Bruce'a Lawsona i Remy'ego Sharp'a ma do powiedzenia na ten temat:

Nagłówek może również zawierać elementy nawigacyjne. Może to być bardzo przydatne do nawigacji w całej witrynie, szczególnie w witrynach opartych na szablonach, w których cały <header>element może pochodzić z pliku szablonu.

Oczywiście nie jest wymagane, aby <nav>znajdował się w <header>.

To zależy w dużej mierze od tego, czy uważasz, że nawigacja dla całej witryny należy do nagłówka całej witryny, a także pragmatycznych względów dotyczących łatwości stylizacji.

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ą sprzężenie między treścią a stylem.

To zależy całkowicie od Ciebie. Możesz umieścić je w nagłówku lub nie, o ile elementy w nich zawarte są tylko wewnętrznymi elementami nawigacji (tj. Nie zawierają linków do zewnętrznych witryn, takich jak konto na Twitterze lub Facebooku), to jest w porządku.

Zwykle są umieszczane w nagłówku po prostu dlatego, że często tam idzie nawigacja, ale nie jest to utrwalone.

Możesz przeczytać więcej na ten temat w HTML5 Doctor .

Trochę niejasne jest, czy pytasz o opinie np. „często robi się xxx” lub rzeczywistą regułę, więc zamierzam skłaniać się w kierunku zasad.

Przytaczane przykłady wydają się być oparte na przykładach w specyfikacji elementu nav . Pamiętaj, że specyfikacja jest ciągle modyfikowana, a zasady są czasami zagmatwane, więc zaryzykowałbym, że wiele osób po prostu robi to, co jest podane, zamiast interpretować. Pokazujesz dwa oddzielne przykłady z różnymi zachowaniami, więc możesz w nich przeczytać tylko tyle. Czy któraś z tych witryn ma również przeciwną sytuację podrzędną / nawigacyjną, a jeśli tak, jak sobie z tym radzą?

Ale co najważniejsze, w specyfikacji nic nie mówi, że jest to sposób na zrobienie tego. Jednym z celów HTML5 było bardzo jasne [to dla porównania] co do semantyki, wymagań itp., Więc pominięcie jest warte odnotowania. O ile widzę, przykłady są niezależne od siebie i równie ważne w ich własnym kontekście wymagań dotyczących układu itp.

Warunkowe położenie źródła nawigacji jest trochę głupie (kolejna czerwona flaga). Po prostu wybierz metodę i postępuj zgodnie z nią.

Nie lubię umieszczać nav w nagłówku . Moje rozumowanie jest następujące:

Logika

Nagłówek zawiera wstępne informacje o dokumencie. Nav jest menu, które linki do innych dokumentów. Moim zdaniem oznacza to, że zawartość nawigacji należy do witryny, a nie do dokumentu. Wyjątkiem byłoby, gdyby NAV posiadało łącza do przodu.

Dostępność

Lubię umieszczać menu na końcu kodu źródłowego, a nie na początku. Używam CSS do wysyłania go na górę ekranu komputera lub zostawiam na końcu dla przeglądarek tekstowych i małych ekranów. Pozwala to uniknąć konieczności stosowania linków przeskakujących.

@IanDevlin ma rację. Zasady MDN mówią, co następuje :

„Element nagłówka HTML” „definiuje nagłówek strony - zazwyczaj zawiera logo i nazwę witryny oraz ewentualnie poziome menu…”

Słowo „prawdopodobnie” jest tam kluczowe. Dalej mówi się, że nagłówek niekoniecznie musi być nagłówkiem witryny. Na przykład możesz dołączyć „nagłówek” do wyskakującego okienka lub w innych modułowych częściach dokumentu, w których znajduje się nagłówek, i byłoby pomocne, gdyby użytkownik czytnika ekranu wiedział o tym.

Jeśli chodzi o niejawne użycie NAV, możesz go używać wszędzie tam, gdzie istnieje zgrupowana nawigacja po witrynie, chociaż zwykle jest pomijany w sekcji „stopka” dla mini-nawigacji / ważnych linków do witryn.

Naprawdę sprowadza się to do wyboru osobistego / zespołu. Zdecyduj, co ty i twój zespół czujecie, jest bardziej semantyczne i ważniejsze, i staraj się być konsekwentny. Dla mnie, jeśli nawigacja jest w linii z logo i "h1" strony głównej, to sensowne jest umieszczenie go w "nagłówku", ale jeśli masz inny projekt, zdecyduj indywidualnie dla każdego przypadku.

Przede wszystkim zapoznaj się z dokumentacją i upewnij się, że jeśli zdecydujesz się pominąć lub dołączyć, rozumiesz, dlaczego podejmujesz tę konkretną decyzję.

Aby rozwinąć to, co powiedział @JoshuaMaddox, w obszarze edukacyjnym MDN, w sekcji „Wprowadzenie do HTML”, w podsekcji Struktura dokumentu i witryny jest napisane (pogrubienie / wyróżnienie jest przeze mnie):

nagłówek

Zwykle duży pasek na górze z dużym nagłówkiem i / lub logo. Jest to miejsce, w którym główne typowe informacje o witrynie internetowej zwykle pozostają z jednej strony na drugą.

Pasek nawigacyjny

Linki do głównych sekcji serwisu; zwykle reprezentowane przez przyciski menu, łącza lub karty. Podobnie jak nagłówek, ta treść zwykle pozostaje spójna na różnych stronach internetowych - niespójna nawigacja w witrynie prowadzi tylko do zdezorientowanych, sfrustrowanych użytkowników. Wielu projektantów stron internetowych uważa, że ​​pasek nawigacji jest częścią nagłówka, a nie pojedynczym komponentem, ale nie jest to wymagane; w rzeczywistości niektórzy twierdzą również, że posiadanie dwóch oddzielnych jest lepsze dla dostępności, ponieważ czytniki ekranu mogą lepiej odczytać te dwie funkcje, jeśli są oddzielne .