Etiqueta HTML <header>
La etiqueta <header> define la cabecera de una página o una sección. Por lo general, contiene un logotipo, una barra de búsqueda, enlaces de navegación, etc.
Esta etiqueta no introduce una nueva sección en el esquema. Un elemento <header> comúnmente contiene un encabezado (un <h1>–<h6> elemento) para la sección circundante. Sin embargo, esto no es obligatorio.
La etiqueta <header> es uno de los elementos HTML5. En un documento HTML, puedes usar varias etiquetas <header>. Por lo general, se colocan dentro de elementos <body>, <article> o <section>.
peligro
No está permitido colocar la etiqueta
<header>dentro de los elementos<footer>y<address>, ni dentro de otra etiqueta<header>.
Sintaxis
La etiqueta <header> se escribe en pares. El contenido se escribe entre las etiquetas de apertura (<header>) y cierre (<​/header>).
Ejemplo de la etiqueta HTML <header>:
Ejemplo de la etiqueta HTML <header>
<!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>Resultado
Ejemplo de la etiqueta HTML <header> con propiedades CSS:
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 Atributos Globales y Atributos de Eventos.
Cómo dar estilo a una etiqueta HTML <header>
<header id="main-header" class="site-header">
<h1>Page Title</h1>
</header>Práctica
¿Qué es cierto sobre la etiqueta HTML <header> según el contenido de la URL especificada?