Ir al contenido

Etiquetas estructurales en HTML5

HTML5 incorpora nuevas etiquetas para estructurar páginas web. Estos elementos sirven para dividir un documento en partes lógicas, indicando el tipo de contenido que se incluye en cada parte.

Header

El elemento header representa el encabezado de un documento o de una sección de un documento. El uso más común de esta etiqueta es para agrupar los elementos del encabezado principal de una página (logo, título, navegación principal…).

El elemento header puede utilizarse más de una vez dentro de la misma página. En el caso de un blog, por ejemplo, puede contener el título y la fecha de publicación de cada artículo.

El elemento header representa un grupo de ayudas introductorias o de navegación, por lo que no hay que utilizarlo cuando se trata de títulos aislados.

Main

El elemento main abarca el contenido principal de un documento o la funcionalidad central de una aplicación.

Donde antes había un div con id o clase 'contenido', ahora utilizamos main.

Un aspecto importante de este elemento es que solo puede haber uno por página.

Section

El elemento section se utiliza para agrupar contenido relativo a un mismo tema.

Ejemplos del uso de section:

  • La introducción en una página de Inicio.
  • Los capítulos de un libro.
  • La sección de economía en un periódico, agrupando varios artículos.

Usos a evitar del elemento section

El elemento section no es un contenedor genérico. Para agrupar contenidos que no estén relacionados, con el objetivo de darles estilo, hay que seguir utilizando div.

Cuando se trata de contenidos que se pueden publicar de forma independiente, como entradas en blogs o artículos de noticias, es más adecuado utilizar el elemento article.

Article

El elemento article se aplica al contenido que puede ser publicado o distribuido de forma independiente.

Ejemplos del uso de article:

  • Entradas de un blog.
  • Artículos en una revista o un periódico.
  • Una página estática con la historia de una compañía.

El elemento article suele contener un encabezado, y a veces también un pie. El encabezado puede ser simplemente un título, o incluir más elementos y estar agrupados dentro del elemento header.

Aside

El elemento aside representa contenido secundario relacionado con el contenido principal de un documento. Dentro de una página, estos contenidos suelen colocarse en una columna lateral, aunque aside es un elemento semántico y por tanto independiente del diseño.

Aside también puede utilizarse dentro del elemento article, siempre que se trate de contenido relacionado con el artículo.

Footer

El elemento footer representa el pie de página de un documento o de una sección del documento. En este caso, sección no se refiere únicamente al elemento section, si no también a otros como article o aside.

El elemento footer está pensado para incluir la información que normalmente se coloca al final del contenido, como el nombre del autor, enlaces relacionados o derechos de autor.

Al igual que ocurre con el elemento header, pueden utilizarse múltiples footer en una misma página.