fbpx

HTML header

Share on facebook
Facebook
Share on twitter
Twitter
Share on whatsapp
WhatsApp
Share on linkedin
LinkedIn
Share on email
Email

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.

Comparte este artículo:

Share on facebook
Facebook
Share on twitter
Twitter
Share on whatsapp
WhatsApp
Share on linkedin
LinkedIn
Share on email
Email

Revisa estas publicaciones

HTML Style

Para comenzar un documento HTML, será necesario conocer los atributos y contenidos, así como otra información requerida para presentar las bases del código HTML.  Si

VER PUBLICACIÓN COMPLETA