¿Sabías que la etiqueta header en HTML es una de las etiquetas más importantes en este lenguaje?
Ya que es una de las primeras cosas que verá el usuario cuando aterrice en tu sitio web.
Y además, proporciona información esencial del contenido de la página web, como por ejemplo:
- El logotipo o el título de tu sitio web
- El menú de navegación
- Información de contacto
- Y otros muchos elementos.
Sobra decir que, como es la primera sección que verá el usuario vale la pena trabajarlo un poco y sobre todo saber estructurarlo correctamente.
¿Y cómo puedes utilizar esta etiqueta <header> de forma correcta?
Pues solamente, tienes que hacer una cosa: Leer este artículo hasta el final, así de fácil 😄.
Pero antes, recuerda que este artículo forma parte del diccionario HTML del canal DropCoding, donde te enseño cada una de las etiquetas de este lenguaje.
Por cierto, una cosa antes de empezar: Recuerda que no es lo mismo la etiqueta <header> que la etiqueta <head>, que ya vimos en el anterior capítulo.
Y ahora, vamos al lío.
¿Qué es la etiqueta Header y qué función tiene?
La etiqueta <header> en HTML se utiliza para mostrar el encabezado de una página web.
Como hemos visto antes, el encabezado suele contener información importante relacionada con tu contenido.
¿Dónde va header en HTML?
El header siempre se va a mostrar en la parte superior de la página web. Y ojo porque el header va dentro de la etiqueta <Body>, no confundir con la etiqueta <Head>
¿Que no lo acabas de tener claro? No pasa nada. Vamos a ver un ejemplo:
Ejemplos de header en HTML
Aquí ves una pequeña estructura de una página web, y solo tenemos el <header>. Pero, fíjate una cosa: Primero tienes la etiqueta <head>, luego la etiqueta <body> y después de la apertura del <body> tenemos el <header>.
Esto es importante saberlo, que el <header> siempre va dentro del body, al igual que otras etiquetas como main o footer.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Header</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Mi Sitio Web</h1>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<!-- El resto del contenido de la página -->
</body>
</html>En este ejemplo tenemos un <header> que se compone de lo siguiente:
- Un encabezado h1.
- Una etiqueta <nav> para crear el menú.
- Los elementos del menú de navegación (enlaces).
Conclusión
Como te habrás dado cuenta, esta etiqueta es completamente necesaria para crear tu página web.
Y si quieres ver cómo hago un header completo, paso a paso, de una página web, te dejo por aquí un vídeo muy chulo donde te lo explico.
Espero que te haya servido este artículo y ya sabes que si tienes cualquier duda o sugerencia puedes dejarla en los comentarios.
Nos vemos en el siguiente capítulo. ¡Adiós!