Teoría
Teoría

Las etiquetas header y footer: encabezado y pie de página

Además del contenido principal de cada página, tenemos una parte inicial y una parte final que se repiten en el sitio.

La parte inicial se llama «encabezado» y se marca con <header>. La parte final, o «pie de página», se marca con <footer>.

<header>
  Soy el encabezado del sitio. Puedo repetirme en otras páginas.
</header>
<main>
  ¡Soy el contenido principal! Solo aparezco en esta página.
</main>
<footer>
  Soy el pie de página del sitio y también puedo repetirme.
</footer>

Normalmente hay un <header> y un <footer> por página, aunque puede haber más.

Agreguemos el encabezado y el pie de página a la página principal. Por ahora usaremos textos provisionales.

<header> puede representar el encabezado del sitio, con su logotipo y su menú, pero también la parte inicial de un artículo o una sección. En un artículo, por ejemplo, puede contener encabezados, una tabla de contenido y otros elementos de introducción.

Con <footer> ocurre algo parecido. Suele representar el pie de página del sitio, donde aparecen los derechos de autor, los datos de contacto y otra información. También puede usarse en otras secciones: al final de un artículo, por ejemplo, puede contener datos de su autoría y enlaces adicionales.

index.html

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Mi primer sitio web</title> <link rel="stylesheet" href="outlines.css"> </head> <body> <main> ¡Hola a todos! Te doy la bienvenida a mi primer sitio web. Hasta hace poco no sabía qué hacía alguien que se dedica a la maquetación web. Ahora encontré estos ejercicios de HTML y CSS y quiero dedicarme a eso. Incluso tengo un instructor, Cupcake, que no me dejará distraerme y seguirá mis avances. Mi primera tarea es llevar un diario y contar con sinceridad todos mis logros. </main> </body> </html>

ObjetivosRealizado

Antes de <main>, agrega una etiqueta <header> con el texto Encabezado del sitio.
Después de <main>, agrega una etiqueta <footer> con el texto Pie de página del sitio.