In HTML5, so che <nav>può essere utilizzato all'interno o all'esterno <header>dell'elemento masthead della pagina . Per i siti Web con navigazione secondaria e principale, sembra comune includere la navigazione secondaria come <nav>elemento all'interno <header>dell'elemento masthead con la navigazione principale come <nav>elemento all'esterno <header>dell'elemento masthead . Tuttavia, se il sito Web non ha una navigazione secondaria, sembra comune includere la navigazione principale in un <nav>elemento all'interno <header>dell'elemento masthead .

Se seguo questi esempi, la mia struttura dei contenuti sarà basata sull'inclusione o esclusione della navigazione secondaria. Questo introduce un accoppiamento tra il contenuto e lo stile che sembra superfluo e innaturale.

Esiste un modo migliore per non spostare la navigazione principale dall'interno all'esterno <header>dell'elemento masthead in base all'inclusione o esclusione della navigazione secondaria?

Esempio di navigazione principale e secondaria

<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 è un sito di esempio che segue il modello sopra.

Solo principale esempio di navigazione

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

Keyzo.co.uk è un sito di esempio che segue il modello sopra.

Estratti dall'introduzione di HTML5 - Aggiunti il ​​02-feb-11, 7:38

L'introduzione di HTML5 di Bruce Lawson e Remy Sharp ha questo da dire sull'argomento:

L'intestazione può anche contenere la navigazione. Questo può essere molto utile per la navigazione a livello di sito, in particolare su siti basati su modelli in cui l'intero<header> elemento potrebbe provenire da un file modello.

Naturalmente, non è necessario che l' <nav>essere in <header>.

Se dipende in gran parte dal fatto che ritieni che la navigazione a livello di sito appartenga all'intestazione a livello di sito e anche da considerazioni pragmatiche sulla facilità di stile.

Sulla base di quest'ultima frase, sembra che Bruce Lawson - autore del capitolo di quegli estratti - ammetta che "considerazioni pragmatiche sulla facilità di stile" producono un accoppiamento tra il contenuto e lo stile.

Dipende tutto da te. Puoi inserirli nell'intestazione oppure no, purché gli elementi al loro interno siano solo elementi di navigazione interna (ovvero non collegare a siti esterni come un account Twitter o Facebook), quindi va bene.

Tendono a essere inseriti in un'intestazione semplicemente perché è lì che spesso va la navigazione, ma non è incastonata.

Puoi saperne di più su HTML5 Doctor .

Non è chiaro se stai chiedendo opinioni, ad es. "è comune fare xxx" o una regola reale, quindi mi spingerò nella direzione delle regole.

Gli esempi che citi sembrano basati sugli esempi nelle specifiche per l'elemento nav . Ricorda che le specifiche continuano a essere modificate e le regole a volte sono contorte, quindi mi permetto che molte persone tendano a fare solo ciò che viene dato piuttosto che interpretare. Stai mostrando due esempi separati con comportamenti diversi, quindi c'è solo così tanto da leggere. Uno di questi siti ha anche la situazione di sub / nav opposta, e in tal caso come la gestiscono?

Ancora più importante, tuttavia, non c'è nulla nelle specifiche che dicono che sia il modo di farlo. Uno degli obiettivi con HTML5 era quello di essere molto chiari [questo per il confronto] su semantica, requisiti, ecc., Quindi vale la pena notare l'omissione. Per quanto posso vedere, gli esempi sono indipendenti l'uno dall'altro e ugualmente validi nel loro contesto di requisiti di layout, ecc.

Avere la posizione di partenza del navigatore condizionata è una specie di sciocco (un'altra bandiera rossa). Basta scegliere un metodo e seguirlo.

Non mi piace mettere il nav nella intestazione . Il mio ragionamento è:

Logica

L' intestazione contiene informazioni introduttive sul documento. Il nav è un menu che collega ad altri documenti. A mio avviso, ciò significa che il contenuto del navigatore appartiene al sito anziché al documento. Un'eccezione sarebbe se il NAV mantenesse collegamenti in avanti.

Accessibilità

Mi piace mettere i menu alla fine del codice sorgente anziché all'inizio. Uso i CSS per inviarlo nella parte superiore dello schermo di un computer o alla fine per browser di sintesi vocale e schermi di piccole dimensioni. Questo evita la necessità di saltare i collegamenti.

@IanDevlin è corretto. Le regole di MDN dicono quanto segue :

"L'elemento di intestazione HTML" "definisce un'intestazione di pagina - in genere contenente il logo e il nome del sito e possibilmente un menu orizzontale ..."

La parola "forse" è la chiave. Continua dicendo che l'intestazione non deve necessariamente essere un'intestazione del sito. Ad esempio, è possibile includere un'intestazione in un pop-up modale o in altre parti modulari del documento in cui è presente un'intestazione e sarebbe utile che un utente su uno screen reader lo sappia.

In termini di utilizzo implicito di NAV puoi usarlo ovunque ci sia la navigazione del sito raggruppata, anche se di solito è omessa dalla sezione "piè di pagina" per mini-nav / collegamenti a siti importanti.

Dipende davvero dalla scelta personale / della squadra. Decidi cosa tu e il tuo team ritenete più semantico e più importante e cercate di essere coerenti. Per me, se il nav è in linea con il logo e la "h1" del sito principale, allora ha senso inserirlo nella "intestazione", ma se hai una scelta di design diversa, decidi caso per caso.

Soprattutto, controlla i documenti e assicurati che se scegli di omettere o includere capisci perché stai prendendo quella particolare decisione.

Per espandere ciò che ha detto @JoshuaMaddox, nell'area di apprendimento MDN, nella sezione "Introduzione all'HTML", la sottosezione della struttura del documento e del sito Web dice (grassetto / enfasi è da me):

Intestazione

Di solito una grande striscia nella parte superiore con una grande intestazione e / o logo. Qui è dove le principali informazioni comuni su un sito Web di solito rimangono da una pagina Web all'altra.

Barra di navigazione

Collegamenti alle sezioni principali del sito; solitamente rappresentato da pulsanti, collegamenti o schede di menu. Come l'intestazione, questo contenuto di solito rimane coerente da una pagina Web all'altra: avere una navigazione incoerente sul tuo sito Web porterà solo utenti confusi e frustrati. Molti web designer considerano la barra di navigazione come parte dell'intestazione piuttosto che un singolo componente, ma questo non è un requisito; in effetti alcuni sostengono anche che avere i due separati sia meglio per l'accessibilità, poiché gli screen reader possono leggere meglio le due caratteristiche se sono separate .