Etiqueta header HTML5: Indicar el código HTML de la cabecera

Vamos a repasar la nueva etiqueta header HTML5 que contiene la agrupación de código HTML correspondiente a la cabecera de la web o referencia descriptiva a artículos.

Puede haber varias en una misma URL y es muy parecida a la etiqueta footer.

La agrupación de código en esta etiqueta HTML5 debería contener:

• Logotipo o cabecera
• Encabezados h1, h2, h3… o etiqueta hgroup
• Título de la web o artículo
• Texto descriptivo de la web o artículo
• Menú de navegación –> etiqueta nav
• Enlaces de interés (Contactar…) –> etiqueta aside o section

Sintaxis de la etiqueta header HTML5

Veamos la sintaxis del nuevo elemento HTML5 extraída de su web oficial:

<header>
<!-- Código HTML -->
</header>

Podemos ver como header tiene sus etiquetas de apertura y cierre, el código que se encuentre entre ambas se considerará perteneciente a la zona de cabecera/comienzo de la web o referencia al titular y descripción de un artículo.

Códigos de ejemplo de la etiqueta header HTML5

Os pongo un código de ejemplo básico de header para la cabecera de una web:

<header>
 <h1>TITULO DE LA WEB</h1>
 <h2>Breve descripción de la página web.</h2>
 <ul>
  <li><a href="inicio.html">Inicio</a></li>
  <li><a href="unaseccion.html">Una Sección</a></li>
  <li><a href="otraseccion.html">Otra Sección</a></li>
 </ul>
</header>

Este otro código cuando referenciamos artículos:

<article>
 <header>
  <h1>Titular del artículo o post</h1>
  <p>Texto descriptivo o entradilla</p>
 <header>
</article>

Etiquetas semánticas y de estructura HTML5

En este post recopilo estas etiquetas:

• Las nuevas etiquetas semánticas de estructura HTML5