fbpx

HTML header

La etiqueta <header> es normalmente utilizada como el encabezado de una sección, en ellos pueden encontrarse diversos elementos como vínculos, logos, tablas de contenido o algunas introducciones.

Esta etiqueta puede representar el encabezado de un elemento como <article> o <section> cuando está dentro de él, en caso contrario, al pertenecer a un elemento <body>, se muestra como el encabezado para todo el documento.

Descripción

Hay que tener claro que los elementos <head> y <header> no son los mismos ¿Qué quiere decir esto? Pues que el elemento <head> dota de metadatos al documento, mientras que la etiqueta <header> representa elementos de navegación o introductorios.

Este elemento en sí no forma parte del contenido de una sección y, por eso, no anexa una nueva sección en la descripción.

Además, el contexto de su uso es de tipo dinámico, pero sin utilizar un <header> o <footer> descendente. También es importante resaltar que este elemento no debe ser descendiente de elementos como <footer>, <address> u otro elemento <header>.

Ejemplos

Como primer ejemplo, utilizaremos la etiqueta <header> para agrupar el nombre de una compañía, su logo y además un formulario de búsqueda, este ejemplo es uno de los más comunes.

<header>
  <img src="../../../images/transp-serquiveca-logo.png">
  <h1>Transporte Serquiveca</h1>
  <form action="search.php">
    <input type="text">
    <input type="submit" value="Buscar">
  </form>
</header>

En el siguiente ejemplo veremos un elemento <article>, siendo encabezado con un elemento <header> que solo influye en la sección que lo contiene.

<article>
  <header>
    <h1>Se terminó la era de Ellen DeGeneres</h1>
    <p id="intro">Después de 17 años al frente la humorista renuncia a su show.</p>
  </header>
  <p>La humorista Ellen DeGeneres renunció a NBC después de 17 años. Después de dos semanas en donde exempleados denunciaran que en el show se vivía un ambiente laboral toxico. Todo lo que parecía felicidad acabó cuando un grupo del personal denunció que sufrían acoso y racismo.</p>
</article>

Atributos

Los atributos del elemento <header> son los mismos que han sido definidos de manera estándar para todos los elementos, es decir, los atributos globales.

Los cuales definen el lenguaje usado, la dirección del texto, la relación que puede tener esta etiqueta con otros elementos, entre otros.

¡Adelante! deja tu comentario



Shares
Share This