Etiqueta HTML <header>
La etiqueta <header> define el encabezado de una página o sección. Descripción, atributos y ejemplos de uso.
La etiqueta <header> define contenido introductorio para una página o una sección. Normalmente contiene un logotipo, el título del sitio, un cuadro de búsqueda y enlaces de navegación como un menú <nav>.
Esta etiqueta no introduce una nueva sección en el esquema del documento. Un elemento <header> suele contener un encabezado (un elemento <h1>–<h6>) para la sección que lo rodea, aunque un encabezado no es obligatorio.
La etiqueta <header> es uno de los elementos semánticos de HTML5. En un mismo documento se pueden usar varias etiquetas <header>. Se colocan habitualmente dentro de los elementos <body>, <article> o <section>. El elemento equivalente para cerrar el contenido es la etiqueta <footer>.
Por qué usar varios encabezados
Una página puede tener más de un <header> porque los encabezados existen en diferentes niveles:
- Encabezado de página — hijo directo de
<body>. Introduce el documento completo: el logotipo del sitio, la navegación global y un campo de búsqueda. Normalmente solo hay uno de estos. - Encabezado de sección — un encabezado colocado dentro de un
<article>o<section>. Introduce únicamente ese bloque de contenido, por ejemplo el título, el autor y la fecha de publicación de una entrada de blog.
Piensa en una página de índice de blog. El <header> a nivel de página contiene el nombre del sitio y el menú principal. Luego cada entrada es un <article> con su propio <header> que incluye el título y los metadatos de esa entrada. Ambos son encabezados, pero describen ámbitos distintos, lo que ayuda a los navegadores, los lectores de pantalla y los motores de búsqueda a comprender la estructura.
Accesibilidad y el punto de referencia banner
Cuando <header> es hijo directo de <body>, las tecnologías de asistencia lo exponen como el punto de referencia ARIA banner — la región introductoria de todo el sitio. Los usuarios de lectores de pantalla pueden saltar directamente a él, por lo que no es necesario añadir role="banner" manualmente.
Ese mapeo desaparece cuando el <header> está anidado dentro de un <article>, <section>, <main>, <aside> o <nav>. Un encabezado así introduce únicamente su propia sección y no se trata como el punto de referencia banner. Un documento debe tener un solo punto de referencia banner, por lo que conviene mantener un único <header> a nivel de página como hijo de <body>.
Sintaxis
La etiqueta <header> va en pares. El contenido se escribe entre las etiquetas de apertura (<header>) y cierre (</header>).
Ejemplo de la etiqueta HTML <header>
Esta página tiene dos encabezados: uno a nivel de página dentro de <body> y otro a nivel de sección dentro de un <article>.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
padding: 0;
}
ul li {
display: inline-block;
margin-right: 10px;
color: #778899;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>About us</li>
</ul>
</nav>
<h1>Welcome to our page</h1>
<hr>
</header>
<article>
<header>
<h2>The section title</h2>
<p>The text paragraph.</p>
</header>
</article>
</body>
</html>Ejemplo de la etiqueta HTML <header> con propiedades CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 2;
}
h2 {
text-align: center;
}
ul {
padding: 0;
}
ul li {
list-style-type: none;
display: inline-block;
margin-right: 10px;
}
a {
display: block;
color: #778899;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="https://www.w3docs.com/learn-html.html">Learn HTML</a>
</li>
<li>
<a href="https://www.w3docs.com/learn-git.html">Learn Git</a>
</li>
</ul>
</nav>
<h1>Welcome to our page</h1>
<hr>
</header>
<main>
<h2>Get answers to your coding questions</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</main>
</body>
</html>Atributos
La etiqueta <header> admite los Atributos Globales y los Atributos de Evento. No tiene atributos propios.
Agregar id y class para estilos
<header id="main-header" class="site-header">
<h1>Page Title</h1>
</header>Etiquetas relacionadas
<footer>— el complemento de cierre de<header>.<main>— el contenido principal del documento.<nav>— enlaces de navegación, que a menudo se colocan dentro de un encabezado.<section>— una sección independiente que puede tener su propio encabezado.<article>— contenido autocontenido que puede tener su propio encabezado.