¡No lo confundas con “head”! Conozcamos la etiqueta header en HTML y aprendamos a diseñar el encabezado del sitio web.
La parte superior de muchos sitios web consta de un logotipo, un menú, una barra de búsqueda y otros elementos similares. Normalmente, estos elementos se agrupan en un único bloque llamado encabezado del sitio web. Para crear el encabezado del sitio web, se utiliza la etiqueta HTML <header>.
La etiqueta <header> apareció en HTML5, la versión moderna del lenguaje de marcado de hipertexto. Antes, el encabezado del sitio web se creaba con la etiqueta <div>.
Actualmente, esta práctica está desactualizada, y en este artículo descubrirás por qué. Nos familiarizaremos con la etiqueta <header> y crearemos dos encabezados de sitio web para afianzar la teoría. Más abajo encontrarás los códigos fuente para la creación de estos encabezados. Puedes descargarlos y practicar con nosotros.
Ejemplo de implementación header en HTML
La cabecera de un sitio web se puede diseñar de varias formas. Su apariencia dependerá de los elementos que el desarrollador incluya dentro de la etiqueta par <header>. Los elementos específicos que se usen dependerán de las preferencias individuales del desarrollador.
Imagina el diseño de la primera pantalla de un sitio web: en la parte superior está el logotipo, debajo un menú, y más abajo una imagen de fondo con un pequeño bloque de texto. Un desarrollador podría incluir solo el logotipo en la cabecera. Otro podría añadir el logotipo y el menú. Un tercero podría incluir toda la primera pantalla. Todas las opciones son válidas y no hay una que sea más correcta que otra. Por eso, los desarrolladores crean las cabeceras de los sitios basándose en su experiencia y en los detalles del diseño.
Ejemplo de una cabecera con logotipo y menú:
<header>
<img src="logo.png" alt="Logotipo">
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Sobre nosotros</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Portafolio</a></li>
<li><a href="#">Contactos</a></li>
</ul>
</nav>
</header>Diferencia entre header y head
No hay que confundir la etiqueta <header> con la etiqueta similar <head>. La etiqueta <header> crea la cabecera del sitio y se encuentra dentro de la etiqueta <body>. La etiqueta <body> contiene la parte visible de la página, es decir, todo el código HTML que el navegador mostrará.
La etiqueta <head> va antes de <body>. Contiene información técnica que ayuda a mostrar la página en el navegador. Los usuarios no ven este código.
Ejemplo de una página con las etiquetas <head> y <header>:
<!DOCTYPE html>
<html lang="es">
<head>
<!-- La etiqueta <head> contiene información técnica -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi sitio</title>
</head>
<body>
<!-- La etiqueta <body> contiene la parte visible de la página -->
<header>
<!-- La etiqueta <header> se usa para crear la cabecera del sitio -->
<img src="logo.png" alt="Logotipo">
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Sobre nosotros</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Portafolio</a></li>
<li><a href="#">Contactos</a></li>
</ul>
</nav>
</header>
</body>
</html>Normalmente, la etiqueta <header> se asocia con la cabecera del sitio. Sin embargo, también se puede usar como cabecera para páginas individuales o partes de una página.
Tomemos una página con un catálogo que está debajo de la cabecera del sitio. El catálogo tiene tarjetas de productos y un panel de control. El panel de control incluye un menú, una barra de búsqueda y filtros para seleccionar productos. El contenido del panel de control se puede incluir en una etiqueta <header> y convertirlo en la cabecera de la página.
Una página puede tener varias cabeceras. Sin embargo, para mantener la estructura del documento, no se deben anidar dentro de <footer>, <address> u otra etiqueta <header>. De lo contrario, la página podría mostrarse de forma impredecible en los navegadores.
Ejemplo de una página con una cabecera del sitio y una cabecera para el catálogo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi sitio</title>
</head>
<body>
<header>
<!-- Cabecera del sitio -->
<img src="logo.png" alt="Logotipo">
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Sobre nosotros</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Portafolio</a></li>
<li><a href="#">Contactos</a></li>
</ul>
</nav>
</header>
<main>
<section class="catalog">
<header>
<!-- Cabecera del catálogo -->
<h2>Catálogo de productos</h2>
<div class="controls">
<input type="text" placeholder="Buscar">
<select>
<option>Filtro 1</option>
<option>Filtro 2</option>
<option>Filtro 3</option>
</select>
</div>
</header>
<div class="product-cards">
<div class="product-card">
</div>
<div class="product-card">
</div>
</div>
</section>
</main>
<footer>
<p>Copyright (c) 2025. Todos los derechos reservados.</p>
</footer>
</body>
</html>Reemplacemos el catálogo de productos por un blog. Cada entrada tendrá un título, un subtítulo y contenido. El título y el subtítulo se pueden combinar en una etiqueta <header> y usarse como cabecera para una parte de la página, es decir, para todas las entradas del blog.
Ejemplo de una página con una cabecera del sitio y tres cabeceras para entradas de blog:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi sitio</title>
</head>
<body>
<header>
<!-- Cabecera del sitio -->
<img src="logo.png" alt="Logotipo">
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Sobre nosotros</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Portafolio</a></li>
<li><a href="#">Contactos</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<!-- Cabecera de la primera entrada -->
<h2>Título de la primera entrada</h2>
<p>Subtítulo de la primera entrada</p>
</header>
<p>Texto del párrafo</p>
<p>Texto del párrafo</p>
<p>Texto del párrafo</p>
</article>
<article>
<header>
<!-- Cabecera de la segunda entrada -->
<h2>Título de la segunda entrada</h2>
<p>Subtítulo de la segunda entrada</p>
</header>
<p>Texto del párrafo</p>
<p>Texto del párrafo</p>
<p>Texto del párrafo</p>
</article>
<article>
<header>
<!-- Cabecera de la tercera entrada -->
<h2>Título de la tercera entrada</h2>
<p>Subtítulo de la tercera entrada</p>
</header>
<p>Texto del párrafo</p>
<p>Texto del párrafo</p>
<p>Texto del párrafo</p>
</article>
</main>
<footer>
<p>Copyright (c) 2025. Todos los derechos reservados.</p>
</footer>
</body>
</html>
Propósito de la etiqueta <header>
Las etiquetas HTML se dividen en etiquetas de bloque y en línea. La etiqueta <header> es una etiqueta de bloque y apareció en HTML5. Antes, las cabeceras se creaban con la etiqueta de bloque <div>.
Si tomas cualquier documento HTML y reemplazas <header> por <div>, no pasará nada con el diseño. El sitio se mostrará correctamente en todos los navegadores. Esto se debe a que <div> y <header> tienen una función similar: crean un contenedor para organizar otras etiquetas. Son como un armario con estantes para guardar cosas.
En el diseño web moderno, no se reemplaza <header> por <div>. La razón está en el estándar HTML5, que introdujo el concepto de marcado semántico. Las etiquetas no solo deben formar la estructura de la página, sino también transmitir el significado del contenido: describir el propósito de los bloques principales y aclarar la función de ciertos elementos.
La semántica transformó <div> en <header>. También aparecieron otras etiquetas semánticas que antes se envolvían en <div>. Por ejemplo, con la etiqueta <nav> se puede crear un menú de navegación, y en <footer> se puede añadir contenido para la parte inferior del sitio. El nombre de estas etiquetas indica claramente qué código contienen.
El marcado semántico fomenta que los desarrolladores escriban código estructurado, fácil de leer y mantener. También ayuda a los robots de búsqueda y a las personas con discapacidades visuales a navegar por el sitio.
Los robots de búsqueda no pueden analizar visualmente las páginas, por lo que sin un marcado semántico les resulta difícil identificar la ubicación de los elementos. Por el contrario, el marcado semántico permite escanear rápidamente las páginas, leer la estructura y evaluar el contenido. Esto hace que los sitios sean más visibles para los motores de búsqueda.
Las personas con visión limitada exploran los sitios a través de lectores de pantalla, dispositivos o aplicaciones que reproducen el contenido y los elementos de la página con voz. Los lectores de pantalla ayudan a navegar por el sitio, moverse rápidamente entre bloques y encontrar información. El marcado semántico permite que estos programas distingan correctamente la cabecera del sitio del contenido principal y otros elementos de la página. Esto forma parte del concepto de accesibilidad digital, respaldado por el equipo de Chrome.
Guía de accesibilidad web de los miembros del equipo de Chrome
Atributos de la etiqueta <header>
No hay atributos específicos para la etiqueta <header>, pero se le pueden aplicar atributos globales, comunes a todos los elementos HTML.
Por ejemplo, con el atributo global title se puede añadir una tooltip emergente a cualquier etiqueta.
<header title="¡Soy el atributo global 'title'! Mostraré este texto cuando alguien pase el cursor sobre el título.">
<h1>Título del sitio</h1>
</header>De todos los atributos globales, el atributo class es el que más se usa con la etiqueta <header>. En él se escribe un nombre con el que se puede referir a la etiqueta en la hoja de estilos.
Añadamos tres cabeceras para entradas de un blog en una página. Asignaremos a cada una un nombre de clase y cambiaremos el color de fondo a través de la hoja de estilos. Haremos que el fondo de la primera cabecera sea rojo, el de la segunda amarillo y el de la tercera verde.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Entradas</title>
</head>
<body>
<main>
<article>
<!-- Cabecera de la primera entrada -->
<header class="header-one"> <!-- Añadimos la clase para la primera cabecera -->
<h2>Título de la primera entrada</h2>
<p>Subtítulo de la primera entrada</p>
</header>
<p>Texto del párrafo</p>
<p>Texto del párrafo</p>
<p>Texto del párrafo</p>
</article>
<article>
<!-- Cabecera de la segunda entrada -->
<header class="header-two"> <!-- Añadimos la clase para la segunda cabecera -->
<h2>Título de la segunda entrada</h2>
<p>Subtítulo de la segunda entrada</p>
</header>
<p>Texto del párrafo</p>
<p>Texto del párrafo</p>
<p>Texto del párrafo</p>
</article>
<article>
<!-- Cabecera de la tercera entrada -->
<header class="header-three"> <!-- Añadimos la clase para la tercera cabecera -->
<h2>Título de la tercera entrada</h2>
<p>Subtítulo de la tercera entrada</p>
</header>
<p>Texto del párrafo</p>
<p>Texto del párrafo</p>
<p>Texto del párrafo</p>
</article>
</main>
<footer>
<p>Copyright (c) 2025. Todos los derechos reservados.</p>
</footer>
</body>
</html>/* Estilizamos la primera cabecera por el nombre de la clase */
.header-one {
background-color: red;
}
/* Estilizamos la segunda cabecera por el nombre de la clase */
.header-two {
background-color: yellow;
}
/* Estilizamos la tercera cabecera por el nombre de la clase */
.header-three {
background-color: green;
}A las etiquetas se les pueden asignar cualquier nombre de clase, ya que la especificación HTML lo permite. Sin embargo, hay una recomendación: nombrar las clases según los elementos semánticos. Si el elemento es <header>, es preferible que la clase se llame “header”. Incluso hay sitios con listas de palabras comúnmente usadas para nombres de clases, como Common words.
Los nombres de clases estandarizados hacen que el código sea claro y uniforme. Para ilustrarlo, asignemos un nombre de clase arbitrario, como “top-of-page-content”. Una alternativa sería “header”, un nombre claro que no necesita explicación.
Ejemplo de nombres de clases comúnmente usados para bloques de página:
| Nombre de clase | Significado |
|---|---|
| page | elemento raíz de la página |
| header | encabezado (de página o elemento) |
| footer | pie de página (de página o elemento) |
| section | sección de contenido (una de varias) |
| main, body | parte principal (de página o elemento) |
| content | contenido del elemento |
| sidebar | barra lateral (de página o elemento) |
| aside | bloque con información adicional |
| widget | widget, por ejemplo, en la barra lateral |
En el desarrollo colaborativo, no siempre es posible usar nombres de clases estandarizados. A veces se necesitan nombres específicos para evitar conflictos entre partes del proyecto. Para esto, existen metodologías como BEM de la empresa Yandex. El diseño con BEM implica asignar nombres a todas las etiquetas. Si hay varios <header> en una página, cada uno debe tener una clase.
Los nombres de las clases deben seguir un conjunto de reglas, que no exploraremos aquí. Sin embargo, la esencia de BEM es dividir el código en bloques independientes con nombres claros. En la siguiente sección, practicaremos y profundizaremos en la explicación.
Cómo crear una cabecera de sitio
Ya sabes que cada desarrollador elige los elementos para la cabecera del sitio según su criterio. Esto no afecta el proceso de diseño. Sin embargo, pueden aparecer bloques anidados que, junto con el nombramiento BEM, a veces confunden a los principiantes.
Crearemos dos cabeceras de sitio y explicaremos para qué sirve cada bloque. En la primera cabecera habrá un logotipo y un menú. En la segunda, un menú, una imagen de fondo y un texto breve. Si quieres practicar, puedes descargar los archivos fuente o elegir un diseño a tu gusto. Para elegir diseños, recomendamos freepik.com.
Primer caso: cabecera del sitio con logotipo y menú
En esta sección: plan de diseño, esquema y código con comentarios.
Plan de diseño:
No olvides: La directiva <!DOCTYPE> en HTML: qué es, para qué sirve y cómo usarla
- Crear la etiqueta
<header>. Aquí estará todo el contenido de la cabecera. - Dentro de
<header>, incluir una etiqueta<div>con la clase “container”. Este bloque limita el ancho del contenido en la página para que no se estire en monitores de gran formato. El contenedor es un bloque reutilizable que se aplica a diferentes secciones de la página. Solo controla dos propiedades: el ancho y el centrado del contenido. - Dentro del contenedor, añadir un envoltorio interno. En el código, será una etiqueta
<div>con la clase “header__inner”. La notación con guion bajo sigue la convención de BEM, indicando que el envoltorio es un elemento del bloque<header>. Aplicaremos la tecnología Flexbox al envoltorio interno para controlar la disposición de los elementos anidados. - Colocar el logotipo y el menú dentro del envoltorio interno. En este caso, son bloques independientes que se pueden reutilizar en la página.
<!-- Definimos el tipo de documento HTML para el navegador -->
<!DOCTYPE html>
<!-- Establecemos el idioma del contenido de la página (español) -->
<html lang="es">
<head>
<!-- Configuramos la codificación de caracteres -->
<meta charset="UTF-8" />
<!-- Añadimos configuración para la adaptabilidad en diferentes dispositivos -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Escribimos el título de la página -->
<title>Cabecera del sitio con logotipo y menú</title>
<!-- Conectamos la fuente Montserrat a través de Google Fonts. Enlace para elegir fuente: https://fonts.google.com/ -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
<!-- Conectamos la normalización de estilos para una visualización uniforme en diferentes navegadores. Enlace: https://cdnjs.com/libraries/normalize -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>
<!-- Conectamos el archivo de estilos -->
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- Añadimos la cabecera del sitio -->
<header class="header">
<!-- Añadimos el contenedor -->
<div class="container">
<!-- Añadimos el envoltorio interno para alinear el logotipo y el menú -->
<div class="header__inner">
<!-- Creamos el logotipo del sitio -->
<a class="logo" href="#">Logo</a>
<!-- Creamos el menú de navegación con una lista -->
<nav class="menu">
<ul class="menu__list">
<li class="menu__list-item">
<a class="menu__list-link" href="#">Precios</a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href="#">Servicios</a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href="#">Descuentos</a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href="#">Contactos</a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href="#">Blog</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- Espacio para el contenido principal del sitio -->
</body>
</html>
/* Definimos el modelo de caja */
html {
box-sizing: border-box;
}
*,
*::after,
*::before {
box-sizing: inherit;
}
/* Eliminamos el subrayado predeterminado de los enlaces */
a {
text-decoration: none;
}
/* Establecemos un tamaño mínimo de pantalla y añadimos una imagen de fondo */
body {
min-height: 100vh;
background-image: url(../images/bg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
font-family: "Montserrat", sans-serif; /* Usamos la fuente Montserrat */
}
/* Estilizamos el contenedor */
.container {
max-width: 1190px;
padding: 0 15px; /* Aumentamos los márgenes laterales */
margin: 0 auto; /* Centramos el contenedor horizontalmente */
}
/* Estilizamos la cabecera del sitio */
.header {
padding-top: 30px; /* Aumentamos el margen superior para que el logotipo y el menú no se peguen al borde */
}
/* Estilizamos el contenedor interno de la cabecera */
.header__inner {
display: flex; /* Alineamos los elementos en una fila */
justify-content: space-between; /* Distribuimos los elementos por el ancho del contenedor */
align-items: center; /* Alineamos los elementos verticalmente */
}
/* Estilizamos el logotipo */
.logo {
text-transform: uppercase; /* Convertimos el texto a mayúsculas */
font-size: 28px; /* Establecemos el tamaño de la fuente */
font-weight: 900; /* Establecemos un peso de fuente grueso */
color: #ccebfd; /* Establecemos el color del logotipo */
}
/* Estilizamos las listas del menú */
.menu__list {
display: flex; /* Mostramos los elementos de la lista en una fila */
list-style: none; /* Eliminamos los marcadores predeterminados (puntos) */
}
/* Estilizamos los elementos del menú */
.menu__list-item {
margin-right: 20px; /* Añadimos un margen entre los elementos del menú */
}
/* Estilizamos los enlaces del menú */
.menu__list-link {
padding: 10px 20px; /* Aumentamos los márgenes verticales y horizontales */
font-size: 20px; /* Reducimos el tamaño de la fuente */
color: #dcf5fe; /* Establecemos el color de los enlaces */
cursor: pointer; /* Cambiamos el cursor al pasar por encima */
transition: all 0.3s; /* Añadimos una transición suave para los cambios de estilo */
}
/* Estilizamos los enlaces del menú al pasar el cursor */
.menu__list-link:hover {
color: #eb3e30; /* Cambiamos el color de los enlaces al pasar el cursor */
}
Segundo caso: cabecera del sitio con menú, imagen de fondo y texto
En este caso, la cabecera del sitio ocupa toda la primera pantalla. No solo debemos organizar los bloques dentro de una cabecera tan grande, sino también asegurarnos de que el diseño no se rompa si se añade nuevo contenido.
Comencemos con el plan:
- Crear
<header>. - Dividir
<header>en dos zonas: una superior con el menú y una inferior con el contenido. La zona superior se llamará<header__top>y la inferior<header__content>. - Diseñar
<header__top>.- Crear un contenedor.
- En el contenedor, crear un envoltorio interno: una etiqueta
<div>con la claseheader__top-inner. En un diseño con un solo menú, este envoltorio no sería necesario. Pero si quieres añadir un logotipo u otro elemento en la zona superior, puedes aplicar Flexbox a este envoltorio. - Añadir el menú al envoltorio interno.
- Diseñar
<header__content>.- Crear un contenedor.
- En el contenedor, crear un envoltorio interno: una etiqueta
<div>con la claseheader__content-inner. Aplicaremos la tecnología Flexbox a este envoltorio. - Incluir un título y un ícono en el envoltorio interno.
<!-- Definimos el tipo de documento HTML para el navegador -->
<!DOCTYPE html>
<!-- Establecemos el idioma del contenido de la página (español) -->
<html lang="es">
<head>
<!-- Configuramos la codificación de caracteres -->
<meta charset="UTF-8" />
<!-- Añadimos configuración para la adaptabilidad en diferentes dispositivos -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Escribimos el título de la página -->
<title>Cabecera del sitio con menú, imagen de fondo y texto</title>
<!-- Conectamos la fuente Poppins a través de Google Fonts. Enlace para elegir fuente: https://fonts.google.com/ -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<!-- Conectamos la normalización de estilos para una visualización uniforme en diferentes navegadores. Enlace: https://cdnjs.com/libraries/normalize -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>
<!-- Conectamos el archivo de estilos -->
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- Añadimos la cabecera del sitio -->
<header class="header">
<!-- Añadimos el envoltorio superior -->
<div class="header__top">
<!-- Añadimos el contenedor -->
<div class="container">
<!-- Añadimos el envoltorio interno superior para posibles logotipos u otros elementos -->
<div class="header__top-inner">
<!-- Creamos el menú de navegación con una lista -->
<nav class="menu">
<ul class="menu__list">
<li class="menu__list-item">
<a class="menu__list-link" href="#">Felicitaciones <span></span></a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href="#">Festividades <span></span></a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href="#">Promociones <span></span></a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href="#">Regalos <span></span></a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href="#">Contactos <span></span></a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Añadimos el envoltorio para el contenido -->
<div class="header__content">
<!-- Añadimos el contenedor -->
<div class="container">
<div class="header__content-inner">
<h1 class="header__title">Feliz<br />Navidad</h1>
<a class="header__icon" href="#">
<img src="../images/mouse.svg" alt="ícono de ratón" />
</a>
</div>
</div>
</div>
</header>
</body>
</html>
/* Definimos el modelo de caja */
html {
box-sizing: border-box;
}
*,
*::after,
*::before {
box-sizing: inherit;
}
/* Eliminamos el subrayado predeterminado de los enlaces */
a {
text-decoration: none;
}
/* Establecemos un tamaño mínimo de pantalla y añadimos una imagen de fondo */
body {
min-height: 100vh;
font-family: "Poppins", sans-serif;
background-image: url(../images/bg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
/* Estilizamos el contenedor */
.container {
max-width: 1190px;
padding: 0 15px; /* Aumentamos los márgenes laterales */
margin: 0 auto; /* Centramos el contenedor horizontalmente */
}
/* Estilizamos la parte superior de la cabecera */
.header__top {
padding: 30px;
}
/* Estilizamos el menú */
.menu__list {
display: flex;
justify-content: center;
list-style: none;
}
.menu__list-item {
margin: 0 10px;
}
.menu__list-link {
position: relative;
color: #fffee7;
font-size: 1.1em;
text-decoration: none;
padding: 6px 20px;
cursor: pointer;
}
.menu__list-link span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #fff;
border-radius: 7px;
transform: scale(0);
opacity: 0;
transition: transform 0.5s;
}
.menu__list-link:hover span {
transform: scale(1);
opacity: 1;
}
/* Estilizamos el envoltorio para el contenido */
.header__content-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 80vh;
}
.header__title {
font-size: 9em;
text-align: center;
-webkit-text-stroke: 1px #fff;
color: transparent;
background: url(../images/back-text.png);
-webkit-background-clip: text;
background-position: 0 0;
animation: backText 20s linear infinite alternate;
}
/* Animamos el texto en el título */
@keyframes backText {
100% {
background-position: 2000px 0;
}
}
FAQs sobre header en HTML
¿Qué significa header en HTML?
<header> es una etiqueta de bloque que define la cabecera de un sitio web o de una sección, como un blog o un catálogo de productos.
¿Cómo hacer un header en HTML y CSS?
Se crea la estructura HTML con <header>, agregando elementos como logotipo, menú y barra de búsqueda. Luego se aplica CSS para diseñarlo, controlar el tamaño, colores, márgenes y disposición de los elementos.
¿Cómo hacer un header en HTML?
Se utiliza la etiqueta <header> dentro del <body> y se incluyen los elementos que formarán la cabecera, como logotipo, menú de navegación o título de sección.
¿Cómo insertar imagen en header HTML?
Dentro del <header>, se agrega un <img> con el atributo src para la ruta de la imagen y alt para la descripción.
¿Para qué sirve la etiqueta header en HTML?
Sirve para organizar la cabecera de un sitio o sección, contener logotipo, menús, títulos y otros elementos, mejorar la semántica del HTML, la accesibilidad y la visibilidad en buscadores.
