Fundamentos de HTML y CSS

Teoría: Estructura básica en HTML5

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>

El <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 image

<header>
  <h1>Mi Sitio Web</h1>
  <p>Bienvenido a mi blog de desarrollo web</p>
</header>

La etiqueta <nav>

El <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.

Menu image

<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>

El <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 image

<main>
  <h2>Bienvenido a nuestro sitio</h2>
  <p>Aquí encontrarás información sobre nuestros servicios.</p>
</main>

La etiqueta <footer>

🏁 El <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

👉 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ónContiene el logotipo y el menú de navegación
<nav>Para agrupar enlaces de navegación principalesDefine un bloque de navegación en la web
<main>Para el contenido principal de la páginaContiene lo más relevante para el usuario
<footer>En la parte inferior de la página o secciónContiene información de contacto y enlaces legales

🎓 Próxima lección → Aprenderemos a organizar el contenido dentro de <main>.

NavegaciónTeoría

Completado

0 / 18