Etiqueta <HEADER>

La etiqueta <header>, es la primera de las nuevas etiquetas de HTML5, incluidas dentro de la denominación de “web semántica”, que consiste en la utilización de estas etiquetas para la estructura del documento, dotando al documento de sentido en su estructura y formato por el nombre de las etiquetas.

 


Aunque no es obligatorio el uso de las mismas, si es recomendado. Ya que actualmente los buscadores están empezando a dar importancia a la construcción semántica del documento web.

La finalidad de la etiqueta es la de especificar un encabezado dentro de un documento o sección. Se suele utilizar como contenedor para el contenido de introducción o para enlaces de navegación.

Se pueden utilizar varios encabezados con esta etiqueta dentro de otras etiquetas semánticas. Siempre y cuando estas no sean encabezados, pies de documento, o etiquetas de tipo encabezado como la de dirección.

La sintaxis de la etiqueta es la siguiente.

<header>
	Contenido del encabezado … 
</header>

El siguiente ejemplo muestra el uso de la etiqueta en un documento web con varias secciones semánticas.

<!DOCTYPE HTML>
<html>
<head>
  <title>Ejercicios prácticos HTML5</title>
  <meta charset="utf-8">
  <meta name="author" content="José Sáez">
  <meta name="description" content="Ejercicios prácticos HTML5">
  <meta name="generator" content="www.aprendoencasa.com, Curso práctico HTML5">
  <meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5">
</head>
<body>
<header>
    <h1>Encabezamiento del documento.</h1>
    <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos espécimen</p>
</header>
<section>
    <h1>Encabezamiento de sección</h1>
    <p>No sólo sobrevivió 500 años, sino que también ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. </p>
</section>
<article>
    <header>
        <h1>Encabezamiento de articulo</h1>
    </header>
    <p>Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenían pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p>
</article>
</body>
</html>

El ejercicio anterior ha de mostrar un resultado similar al que se muestra a continuación.

Ejercicios HTML5, etiqueta HEADER