- La etiqueta <header>
- La etiqueta <nav>
- La etiqueta <main>
- La etiqueta <footer>
- Ejemplo completo con <header>, <nav> y <main>
- Resumen
En esta lección aprenderás a usar algunas de las etiquetas más importantes de HTML5: <header>, <nav>, <main> y <footer>.
Estas etiquetas permiten que los navegadores, motores de búsqueda y lectores de pantalla entiendan mejor la estructura de una página. Además, hacen que tu código sea más claro y fácil de mantener.
💡 Todas estas etiquetas deben ir dentro de la etiqueta <body>, que es donde se encuentra el contenido visible de la página.
La etiqueta <header>
<header> se usa para definir la parte superior de una página o de una sección específica.
💡 Generalmente contiene:
- Un logotipo
- Un título o eslogan
- Un menú de navegación
Estructura visual de <header>
<header>
<h1>Mi Sitio Web</h1>
<p>Bienvenido a mi blog de desarrollo web</p>
</header>
La etiqueta <nav>
<nav> define un bloque de navegación, generalmente usado para menús.
💡 ¿Cuándo usar <nav>?
- En el menú principal de la página.
- Para enlaces internos dentro de una misma página.
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
La etiqueta <main>
<main> representa el contenido principal de la página.
💡 Reglas importantes:
❌ No debe contener elementos repetitivos como <header>, <nav> o <footer>.
✅ Solo debe haber un <main> por página.
<main>
<h2>Bienvenido a nuestro sitio</h2>
<p>Aquí encontrarás información sobre nuestros servicios.</p>
</main>
La etiqueta <footer>
<footer> representa el pie de página de una web o una sección.
💡 Normalmente contiene:
- Información de contacto.
- Enlaces a redes sociales.
- Avisos legales o derechos de autor.
<footer>
<p>© 2025 Mi Sitio Web - Todos los derechos reservados.</p>
<p><a href="#">Términos y condiciones</a> | <a href="#">Política de privacidad</a></p>
</footer>
Ejemplo completo con <header>, <nav> y <main>
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Resumen
| Etiqueta | ¿Cuándo usarla? | Propósito |
|---|---|---|
<header> |
En la parte superior de una página o sección | Contiene el logotipo y el menú de navegación |
<nav> |
Para agrupar enlaces de navegación principales | Define un bloque de navegación en la web |
<main> |
Para el contenido principal de la página | Contiene lo más relevante para el usuario |
<footer> |
En la parte inferior de la página o sección | Contiene información de contacto y enlaces legales |
🎓 Próxima lección → Aprenderemos a organizar el contenido dentro de <main>.
