El estándar HTML5 permite añadir una cabecera en los contenidos de una página web por medio del elemento <header>. Este elemento no solamente la emplearemos para definir la cabecera del cuerpo de un documento HTML, sino que también lo podemos utilizar como cabecera de cada sección o bloque de contenido de nuestro sitio web. Esto significa que puede haber más de un elemento <header> dentro de una página web.
Cuando un elemento <header> se encuentra dentro de un elemento de seccionamiento, como <article> o <section>, representa un encabezado de ese elemento. Sin embargo, cuando pertenece al elemento <body>, representa un encabezado para el documento completo.
Es importante no confundir los elementos <header> y <head>. Mientras que el elemento <head> provee metadatos para el documento, elemento <header> contiene un grupo de elementos introductorios o de navegación.
En el siguiente ejemplo se muestra una estructura HTML5 en la cual el elemento <header> representa la cabecera de todo el documento o página web:
<!DOCTYPE html>
<html>
<body>
<header>
<h1>10 datos sorprendentes sobre los elefantes</h1>
</header>
<p> Lorem ipsum sit amet, consectetur adipiscing elit. Vestibulum id lorem mi. Integer sit amet urna tristique justo maximus varius. Maecenas pretium, velit quis blandit suscipit, arcu sapien sagittis tortor, at porta dui ipsum in ex. Praesent cursus hendrerit urna, in pharetra nulla egestas interdum. In hac habitasse platea dictumst. Praesent nec est non quam blandit ultricies. Nam quis nisi et est finibus pharetra. Sed eu velit ultrices, porttitor nibh sit amet, finibus enim. </p>
<p> Phasellus vehicula dictum rutrum. Cras viverra viverra elit quis semper. Suspendisse id pulvinar velit, sit amet pulvinar lacus. Phasellus sed pharetra magna. Aliquam orci, suscipit sit amet laoreet id, fringilla eget tellus. Phasellus ultrices, nisi non mollis blandit, risus felis ultricies elit, nec accumsan ante ipsum a nibh. Maecenas ultrices, sapien ac vulputate lacinia, sem elit aliquam, ut semper lacus augue a magna...</p>
</body>
</html>En este otro ejemplo el elemento <header> representa la cabecera de cada sección del documento:
<!DOCTYPE html>
<html>
<body>
<h1>Elefante</h1>
<section>
<header>
<h1>Etimología</h1>
</header>
<p> Lorem ipsum sit amet, consectetur adipiscing elit. Vestibulum id lorem mi. Integer sit amet urna tristique justo maximus varius. Maecenas pretium, velit quis blandit suscipit, arcu sapien sagittis tortor, at porta dui ipsum in ex. Praesent cursus hendrerit urna, in pharetra nulla egestas interdum. In hac habitasse platea dictumst. Praesent nec est non quam blandit ultricies. Nam quis nisi et est finibus pharetra. Sed eu velit ultrices, porttitor nibh sit amet, finibus enim...</p>
</section>
<section>
<header>
<h1>Anatomía y morfología</h1>
</header>
<p> Phasellus vehicula dictum rutrum. Cras viverra viverra elit quis semper. Suspendisse id pulvinar velit, sit amet pulvinar lacus. Phasellus sed pharetra magna. Aliquam orci, suscipit sit amet laoreet id, fringilla eget tellus. Phasellus ultrices, nisi non mollis blandit, risus felis ultricies elit, nec accumsan ante ipsum a nibh. Maecenas ultrices, sapien ac vulputate lacinia, sem elit aliquam, ut semper lacus augue a magna... </p>
</section>
</body>
</html>
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
