Etiquetas semánticas: header, nav, main, article y footer

El HTML semántico utiliza elementos que describen el significado del contenido, no solo su apariencia. <article> indica «esta es una pieza de contenido independiente». Un <div> genérico no indica nada.

Los primeros desarrolladores web construían los diseños utilizando exclusivamente elementos <div> y <span>. Los lectores de pantalla no podían distinguir la navegación del contenido ni de los anuncios. Los motores de búsqueda tenían que adivinar la estructura de la página.

El elemento <header> contiene contenido introductorio de la página o de una sección: normalmente el logotipo, el nombre del sitio y la navegación. Una página puede tener varios encabezados: uno para el sitio y uno por cada artículo.

Utilice <nav> para agrupar conjuntos de enlaces de navegación: el menú principal, una ruta de navegación o un índice. Los lectores de pantalla anuncian los puntos de referencia de navegación para que los usuarios puedan saltar directamente a ellos o pasarlos.

Debe haber exactamente un <main> por página. Contiene el contenido principal exclusivo de esa página, no elementos repetidos como la navegación o el pie de página. Las tecnologías de asistencia permiten a los usuarios saltar directamente a main.

<article> contiene contenido que tiene sentido por sí mismo y podría distribuirse mediante sindicación: una entrada de blog, una noticia, un comentario de usuario o una tarjeta de producto. Pregúntese: «¿Tendría sentido si lo copiara en otro sitio?»

<section> agrupa contenido relacionado que pertenece a un mismo conjunto: capítulos, pestañas o áreas temáticas. Cada sección suele tener un encabezado. Si el contenido pudiera mantenerse por sí solo, utilice article.

<aside> contiene contenido relacionado tangencialmente con el contenido que lo rodea: barras laterales, citas destacadas, publicidad o enlaces relacionados. Los lectores de pantalla lo exponen como un punto de referencia complementario.

<footer> contiene información sobre el elemento que lo contiene: avisos de derechos de autor, enlaces de contacto y documentos relacionados. Al igual que header, una página puede tener varios footers.

Utilice los encabezados para crear un esquema lógico del documento. Solo debe haber un <h1> por página. Utilice h2 para los subencabezados, h3 para los subsubencabezados y así sucesivamente. No se salte niveles ni utilice encabezados solo por su tamaño visual.

Los motores de búsqueda utilizan la estructura semántica para comprender el contenido de la página; una página con puntos de referencia y una jerarquía de encabezados adecuados suele posicionarse mejor. Los usuarios de lectores de pantalla navegan mediante puntos de referencia y encabezados, por lo que la semántica es una cuestión directa de accesibilidad.

Utilice <header>, <nav>, <main>, <article>, <section>, <aside> y <footer> para dar a su documento una estructura que los navegadores, los motores de búsqueda y los lectores de pantalla puedan comprender.