<header> en HTML5El elemento <header> es una etiqueta de HTML5 utilizada para definir una sección de encabezado en un documento o en una sección específica del documento, como un artículo o una sección dentro de una página. El contenido típico de un <header> puede incluir títulos, subtítulos, logotipos, imágenes y otros elementos introductorios o de navegación.
<header>El elemento <header> no tiene atributos especiales que sean exclusivos de él. Sin embargo, puede utilizar todos los atributos globales que están disponibles para la mayoría de los elementos HTML. A continuación se detallan estos atributos globales:
class: Permite asignar una o más clases a un elemento. Las clases pueden especificarse en una hoja de estilos externa o dentro de un bloque <style> para aplicar estilos CSS a grupos específicos de elementos en un documento.
<header class="main-header">
...
</header>id: Asigna un identificador único al elemento. Este identificador debe ser único dentro del documento y puede ser utilizado para aplicar estilos CSS específicos o para manipulación del DOM con JavaScript.
<header id="site-header">
...
</header>style: Permite definir estilos CSS en línea para el elemento.
<header style="background-color: #f8f9fa;">
...
</header>title: Proporciona información adicional sobre el elemento, que a menudo se muestra como un tooltip cuando el usuario coloca el cursor sobre dicho elemento.
<header title="This is the main header">
...
</header>*data- (atributos personalizados)**: Permiten crear atributos personalizados que inician con "data-" para almacenar datos privados o específicos que pueden utilizarse con JavaScript.
<header data-role="header">
...
</header>lang: Especifica el lenguaje del contenido del elemento.
<header lang="en">
...
</header>*aria- (atributos de accesibilidad)**: Proporcionan información adicional para tecnologías de asistencia como los lectores de pantalla.
<header aria-label="Site header">
...
</header><header> en HTML5El <header> se utiliza para englobar un contenido introductorio y habitualmente contiene elementos como logotipos, títulos o menús de navegación. A continuación se presentan algunos ejemplos sencillos de uso de <header> en HTML5:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Header</title>
<style>
.main-header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header class="main-header">
<h1>Bienvenido a Nuestro Sitio Web</h1>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#nosotros">Nosotros</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<!-- Contenido principal -->
</main>
</body>
</html><!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Header en una Sección</title>
</head>
<body>
<section>
<header>
<h2>Últimas Noticias</h2>
</header>
<article>
<header>
<h3><a href="#noticia1">Noticia Importante 1</a></h3>
<p>Publicado el 1 de Enero de 2023</p>
</header>
<p>Contenido de la noticia 1...</p>
</article>
<article>
<header>
<h3><a href="#noticia2">Noticia Importante 2</a></h3>
<p>Publicado el 2 de Enero de 2023</p>
</header>
<p>Contenido de la noticia 2...</p>
</article>
</section>
</body>
</html>En resumen, el elemento <header> en HTML5 es una parte integral del diseño y estructura de las páginas web modernas, facilitando la organización del contenido de manera jerárquica y clara, al mismo tiempo que mejora la accesibilidad y la navegabilidad del sitio.