¿Cuál es la función de las etiquetas «header» y «footer» de sección y de página?
«Header» y «footer» en HTML: úsalos a nivel de página (logo, copyright) o de sección (título de artículo, autor). ¡Estructura semántica para tu web!
Las etiquetas <header> y <footer> en HTML5 se utilizan para definir, respectivamente, la cabecera y el pie de su contexto semántico más cercano.
Este contexto puede ser toda la página (el <body>) o una sección específica dentro de ella, como un <article>, una <section>, un <aside> o un <nav>.
Son elementos semánticos que ayudan a definir la estructura de una página y de sus secciones internas, como <article> o <section>.
Su función depende del contexto en el que se encuentren.
No están limitadas a aparecer solo una vez en la parte superior e inferior de la página.
<header> (Cabecera):
- Función: Se usa para agrupar contenido introductorio o un conjunto de ayudas a la navegación.
- A nivel de página (cuando es hijo directo de
<body>o no está dentro de otra sección de contenido principal): Típicamente contiene el logotipo del sitio, el título principal de la página (a menudo un<h1>), el menú de navegación principal (<nav>), un formulario de búsqueda, etc. - A nivel de sección (cuando está dentro de un
<article>,<section>, etc.): Sirve como cabecera para esa sección específica. Puede contener el título de la sección (un<h2>-<h6>), información sobre el autor, fecha de publicación, una tabla de contenidos para esa sección, etc.
<footer> (Pie de página):
- Función: Representa el pie de la sección que lo contiene. Usualmente incluye información sobre dicha sección.
- A nivel de página: Suele contener información de copyright, datos de contacto, enlaces a políticas de privacidad, mapa del sitio, o enlaces a redes sociales.
- A nivel de sección: Puede incluir el nombre del autor del artículo, la fecha de publicación, etiquetas relacionadas, enlaces a contenido similar dentro de esa sección, o notas al pie específicas de ese bloque.
Ejemplo de uso:
<body>
<header> <img src="logo.png" alt="Logo del Sitio">
<nav> <ul>...</ul>
</nav>
</header>
<main>
<article>
<header> <h2>Título de Este Artículo</h2>
<p>Publicado por: Juan Pérez el <time datetime="2025-05-28">28 de mayo de 2025</time></p>
</header>
<p>Contenido del artículo...</p>
<section>
<h3>Subsección del Artículo</h3>
<p>Más detalles...</p>
</section>
<footer> <p>Etiquetas: <a href="#">HTML</a>, <a href="#">Semántica</a></p>
</footer>
</article>
</main>
<footer> <p>© 2025 Mi Sitio Web. Todos los derechos reservados.</p>
<p><a href="/contacto.html">Contacto</a></p>
</footer>
</body>
</html>
Lenguaje del código: PHP (php)Puedes y debes usar múltiples etiquetas <header> y <footer> en un mismo documento HTML, cada una aplicando a su sección contenedora para mejorar la estructura y semántica de tu página.
