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:
|
1 2 3 |
<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:
|
1 2 3 4 5 6 7 8 9 |
<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:
|
1 2 3 4 5 6 |
<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: