No HTML5, eu sei que <nav>pode ser usado dentro ou fora do <header>elemento de cabeçalho da página . Para sites com navegação secundária e principal, parece comum incluir a navegação secundária como um <nav>elemento dentro do <header>elemento do cabeçalho com a navegação principal como um <nav>elemento fora do <header>elemento do cabeçalho . No entanto, se o site não possui navegação secundária, parece comum incluir a navegação principal em um <nav>elemento dentro do <header>elemento do cabeçalho .

Se eu seguir esses exemplos, minha estrutura de conteúdo será baseada na inclusão ou exclusão da navegação secundária. Isso introduz um acoplamento entre o conteúdo e o estilo que parece desnecessário e não natural.

Existe uma maneira melhor de não mover a navegação principal de dentro para fora do <header>elemento do cabeçalho com base na inclusão ou exclusão da navegação secundária?

Exemplo de Navegação Principal e Secundária

<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 é um site de exemplo que segue o padrão acima.

Exemplo de Navegação Apenas Principal

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

Keyzo.co.uk é um site de exemplo que segue o padrão acima.

Trechos de Introdução ao HTML5 - Adicionado em 11/02/11, 7:38

A introdução do HTML5 de Bruce Lawson e Remy Sharp tem a dizer sobre o assunto:

O cabeçalho também pode conter navegação. Isso pode ser muito útil para a navegação em todo o site, especialmente em sites controlados por modelos, nos quais todo o <header>elemento pode vir de um arquivo de modelo.

Obviamente, não é necessário que <nav>esteja no <header>.

Depende em grande parte se você acredita que a navegação em todo o site pertence ao cabeçalho em todo o site e também considerações pragmáticas sobre a facilidade de estilização.

Com base nessa última frase, parece que Bruce Lawson - autor do capítulo desses trechos - admite que "considerações pragmáticas sobre a facilidade de estilizar" produzem um acoplamento entre o conteúdo e o estilo.

Depende completamente de você. Você pode colocá-los no cabeçalho ou não, desde que os elementos dentro deles sejam apenas elementos de navegação interna (por exemplo, não vincule a sites externos, como uma conta no Twitter ou no Facebook), então tudo bem.

Eles tendem a ser colocados em um cabeçalho simplesmente porque é aí que a navegação costuma ir, mas não é imutável.

Você pode ler mais sobre isso no HTML5 Doctor .

Não é claro se você está pedindo opiniões, por exemplo. "é comum fazer xxx" ou uma regra real, então vou me inclinar na direção das regras.

Os exemplos que você cita parecem baseados nos exemplos na especificação para o elemento nav . Lembre-se de que as especificações continuam sendo aprimoradas e as regras às vezes são complicadas, então eu diria que muitas pessoas tendem a fazer o que é dado em vez de interpretar. Você está mostrando dois exemplos separados com comportamento diferente, para que você possa ler muito sobre isso. Esses sites também têm a situação oposta de sub / nav e, em caso afirmativo, como eles lidam com isso?

Mais importante, porém, não há nada nas especificações dizendo que essa é a maneira de fazê-lo. Um dos objetivos do HTML5 era ser muito claro [isso para comparação] sobre semântica, requisitos etc., portanto, a omissão é digna de nota. Tanto quanto posso ver, os exemplos são independentes um do outro e são igualmente válidos dentro de seu próprio contexto de requisitos de layout, etc.

Ter a posição de origem da nav ser condicional é meio bobo (outra bandeira vermelha). Basta escolher um método e seguir com ele.

Eu não gosto de colocar a nav no cabeçalho . Meu raciocínio é:

Lógica

O cabeçalho contém informações introdutórias sobre o documento. O nav é um menu vinculado a outros documentos. Na minha opinião, isso significa que o conteúdo da navegação pertence ao site e não ao documento. Uma exceção seria se o NAV mantivesse links avançados.

Acessibilidade

Eu gosto de colocar menus no final do código fonte e não no início. Uso CSS para enviá-lo para o topo da tela de um computador ou deixá-lo no final para navegadores de fala de texto e telas pequenas. Isso evita a necessidade de pular links.

@IanDevlin está correto. As regras da MDN dizem o seguinte :

"O HTML Header Element" "define um cabeçalho da página - normalmente contendo o logotipo e o nome do site e possivelmente um menu horizontal ..."

A palavra "possivelmente" existe chave. Continua dizendo que o cabeçalho não precisa necessariamente ser um cabeçalho de site. Por exemplo, você pode incluir um "cabeçalho" em um modal pop-up ou em outras partes modulares do documento em que exista um cabeçalho e seria útil para um usuário em um leitor de tela saber sobre ele.

Em termos de uso implícito do NAV, você pode usá-lo em qualquer lugar em que a navegação do site seja agrupada, embora geralmente seja omitida na seção "rodapé" dos links de mini-navs / sites importantes.

Realmente, tudo se resume à escolha pessoal / da equipe. Decida o que você e sua equipe consideram mais semântico e mais importante e tente ser consistente. Para mim, se a navegação estiver alinhada com o logotipo e o site principal "h1", faz sentido colocá-lo no "cabeçalho", mas se você tiver uma opção de design diferente, decida caso a caso.

Mais importante, confira os documentos e verifique se você optou por omitir ou incluir, para entender por que está tomando essa decisão específica.

Para expandir o que o @JoshuaMaddox disse, na Área de Aprendizagem da MDN, na seção "Introdução ao HTML", a subseção de Estrutura de documentos e sites diz (em negrito / ênfase é minha):

Cabeçalho

Geralmente, uma faixa grande na parte superior com um cabeçalho e / ou logotipo grande. É aqui que as principais informações comuns sobre um site geralmente ficam de uma página para outra.

Barra de navegação

Links para as principais seções do site; geralmente representado por botões, links ou guias de menu. Assim como o cabeçalho, esse conteúdo geralmente permanece consistente de uma página para outra - ter uma navegação inconsistente no seu site levará apenas a usuários confusos e frustrados.Muitos web designers consideram a barra de navegação como parte do cabeçalho e não como um componente individual, mas isso não é um requisito; na verdade, alguns também argumentam que ter os dois separados é melhor para acessibilidade, pois os leitores de tela podem ler melhor os dois recursos se estiverem separados .