Etiquetas HTML
El elemento <header> en HTML se utiliza para definir el encabezado de una sección o de todo el documento. Proporciona información introductoria o de navegación para el contenido de la página. El encabezado puede incluir el logotipo del sitio web, el título de la página, el menú de navegación, entre otros elementos.
Estructura y sintaxis
La estructura básica del elemento <header> es la siguiente:
<header>
<!-- Contenido del encabezado -->
</header>Dentro de las etiquetas de apertura y cierre de <header>, se coloca el contenido del encabezado, que puede consistir en otros elementos HTML como títulos (<h1>, <h2>, etc.), imágenes (<img>), enlaces (<a>), entre otros.
Ejemplo
A continuación, se muestra un programa HTML de ejemplo que utiliza el elemento <header> para crear un encabezado simple:
<!DOCTYPE html>
<html>
<head>
<title>Blog de tecnología</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<header>
<h1>Blog de tecnología</h1>
<nav>
<a href="#">Inicio</a>
<a href="#">Artículos</a>
<a href="#">Reseñas</a>
<a href="#">Contacto</a>
</nav>
</header>
<section>
<!-- Contenido del artículo -->
</section>
<footer>
<!-- Contenido del pie de página -->
</footer>
</body>
</html>En el ejemplo anterior, el <header> contiene un título principal (<h1>) y una barra de navegación (<nav>) con enlaces a diferentes secciones del sitio web relacionadas con tecnología.
Explicación
El elemento <header> se utiliza para encapsular el contenido del encabezado de un documento HTML. Proporciona una manera semántica de estructurar la información introductoria o de navegación relacionada con el contenido principal de la página.
Al utilizar el elemento <header>, los motores de búsqueda y los lectores de pantalla pueden identificar y comprender fácilmente qué parte del contenido corresponde al encabezado, lo que mejora la accesibilidad y la optimización para los motores de búsqueda (SEO).
En el ejemplo anterior, se utiliza el <header> para crear un encabezado de un blog de tecnología. El encabezado incluye un título principal y una barra de navegación que permite a los visitantes del sitio acceder a diferentes secciones, como artículos, reseñas y una página de contacto.
El uso de un elemento <header> bien estructurado ayuda a los usuarios a comprender rápidamente la temática del blog y facilita la navegación entre las diferentes secciones del sitio.
