section - En HTML5, ¿debería la navegación principal estar dentro o fuera del elemento<header>?

como dividir una pagina web en secciones html

Question

En HTML5, sé que <nav> puede usarse dentro o fuera del elemento masthead <header> la página. Para sitios web con navegación secundaria y principal, parece común incluir la navegación secundaria como un elemento <nav> dentro del elemento masthead <header> con la navegación principal como un elemento <nav> fuera del elemento masthead <header> . Sin embargo, si el sitio web carece de navegación secundaria, parece común incluir la navegación principal en un elemento <nav> dentro del elemento masthead <header> .

Si sigo estos ejemplos, mi estructura de contenido se basará en la inclusión o exclusión de navegación secundaria. Esto introduce un acoplamiento entre el contenido y el estilo que se siente innecesario y antinatural.

¿Hay una mejor manera para que no mueva la navegación principal desde adentro hacia afuera del elemento masthead <header> basado en la inclusión o exclusión de la navegación secundaria?

Ejemplo de navegación principal y secundaria

<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 es un sitio de ejemplo que sigue el patrón anterior.

Principal único ejemplo de navegación

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

Keyzo.co.uk es un sitio de ejemplo que sigue el patrón anterior.

Extractos de Introducción a HTML5 - Agregado el 02-Feb-11, 7:38 AM

La presentación de HTML5 por Bruce Lawson y Remy Sharp tiene esto que decir sobre el tema:

El encabezado también puede contener navegación. Esto puede ser muy útil para la navegación en todo el sitio, especialmente en sitios basados ​​en plantillas donde todo el elemento <header> podría provenir de un archivo de plantilla.

Por supuesto, no se requiere que el <nav> esté en el <header> .

Si depende en gran medida de si usted cree que la navegación en todo el sitio pertenece al encabezado de todo el sitio y también consideraciones pragmáticas sobre la facilidad de diseño.

Basado en esa última oración, parece que Bruce Lawson -autor del capítulo de donde provienen esos extractos- admite que "consideraciones pragmáticas sobre la facilidad de estilo" producen un acoplamiento entre el contenido y el estilo.

Answer 1

@IanDevlin es correcto. Las reglas de MDN dicen lo siguiente :

"El elemento de encabezado HTML" "define un encabezado de página, que generalmente contiene el logotipo y el nombre del sitio y, posiblemente, un menú horizontal ..."

La palabra "posiblemente" allí es clave. Continúa diciendo que el encabezado no necesariamente tiene que ser un encabezado de sitio. Por ejemplo, podría incluir un "encabezado" en un menú emergente o en otras partes modulares del documento donde hay un encabezado y sería útil que un usuario de un lector de pantalla lo supiera.

Los términos del uso implícito de NAV se pueden usar en cualquier lugar donde haya navegación de sitios agrupados, aunque generalmente se omite de la sección "pie de página" para mini-navs / enlaces importantes del sitio.

Realmente se trata de elección personal / equipo. Decida qué es lo que usted y su equipo sienten es más semántico y más importante, y trate de ser consecuente. Para mí, si el navegador está en línea con el logotipo y la "h1" del sitio principal, tiene sentido ponerlo en el "encabezado", pero si tiene una opción de diseño diferente, entonces decida caso por caso.

Lo más importante es consultar los documentos y asegurarse de que si elige omitir o incluir, comprende por qué está tomando esa decisión en particular.

Answer 2

Depende completamente de ti. Puedes ponerlos en el encabezado o no, siempre y cuando los elementos dentro de ellos sean solo elementos de navegación internos (es decir, no enlaces a sitios externos como una cuenta de Twitter o Facebook), entonces está bien.

Tienden a colocarse en un encabezado simplemente porque ahí es donde a menudo va la navegación, pero no está escrito en piedra.

Puede leer más sobre esto en HTML5 Doctor .

Answer 3

No está claro si estás pidiendo opiniones, por ej. "es común hacer xxx" o una regla real, así que me inclinaré en la dirección de las reglas.

Los ejemplos que cita parecen basarse en los ejemplos de la especificación del elemento nav . Recuerde que la especificación sigue siendo modificada y las reglas a veces son intrincadas, por lo que me atrevo a aventurar que muchas personas tienden a hacer lo que se les da en lugar de interpretar. Estás mostrando dos ejemplos separados con comportamientos diferentes, por lo que solo puedes leer tanto. ¿Alguno de esos sitios tiene la situación de sub / nav opuesta y, de ser así, cómo lo manejan?

Lo más importante, sin embargo, no hay nada en la especificación que indique que sea la forma de hacerlo. Uno de los objetivos de HTML5 era ser muy claro [esto a modo de comparación] sobre la semántica, los requisitos, etc., por lo que vale la pena mencionar la omisión. Por lo que puedo ver, los ejemplos son independientes entre sí e igualmente válidos dentro de su propio contexto de requisitos de diseño, etc.

Tener la posición de origen de la navegación como condicional es algo tonto (otra bandera roja). Simplemente elige un método y ve con él.

Answer 4

No me gusta poner el navegador en el encabezado . Mi razonamiento es:

Lógica

El encabezado contiene información introductoria sobre el documento. El nav es un menú que enlaza con otros documentos. En mi opinión, esto significa que el contenido del navegador pertenece al sitio y no al documento. Una excepción sería si el NAV mantiene enlaces hacia adelante.

Accesibilidad

Me gusta poner los menús al final del código fuente en lugar del inicio. Uso CSS para enviarlo a la parte superior de la pantalla de una computadora o dejarlo al final para navegadores de texto y pantallas pequeñas. Esto evita la necesidad de skip-links.

Answer 5

Para ampliar lo que dice @JoshuaMaddox, en el Área de aprendizaje de MDN, en la sección "Introducción a HTML", la subsección Estructura del sitio web y del documento dice (en negrita / énfasis es mío):

Encabezamiento

Por lo general, una gran franja en la parte superior con un gran encabezado y / o logotipo. Aquí es donde la información común principal sobre un sitio web generalmente se mantiene de una página web a otra.

Barra de navegación

Enlaces a las secciones principales del sitio; usualmente representado por botones de menú, enlaces o pestañas. Al igual que el encabezado, este contenido suele ser coherente desde una página web a otra: tener una navegación inconsistente en su sitio web solo conducirá a usuarios confusos y frustrados. Muchos diseñadores web consideran que la barra de navegación es parte del encabezado en lugar de un componente individual, pero eso no es un requisito; de hecho, algunos también argumentan que tener los dos separados es mejor para la accesibilidad, ya que los lectores de pantalla pueden leer las dos características mejor si están separados .