Objetivos de aprendizaje

Aprenderás qué son las etiquetas semánticas en HTML, cuál es su función, y cómo usarlas para organizar mejor el contenido de una página web. Entenderás la importancia de una estructura clara y accesible que ayuda tanto a los usuarios como a los motores de búsqueda.

Contenidos teóricos con ejemplos claros y explicativos

Las etiquetas semánticas en HTML5 son elementos que definen la estructura lógica y el significado del contenido dentro de una página web. A diferencia de usar solo <div>, estas etiquetas describen qué tipo de contenido contienen, haciendo que el código sea más legible y accesible.

<header>: representa la cabecera de una página o sección. Generalmente incluye el logo, título y menús de navegación.
<nav>: contiene los enlaces principales de navegación, como menús o barras de navegación.
<main>: es la parte principal del contenido único y central de la página. Solo debe haber un <main> por página.
<section>: define secciones temáticas o agrupaciones de contenido relacionadas. Se pueden usar para dividir el contenido en bloques con sentido propio.
<footer>: es el pie de página, donde se colocan créditos, enlaces secundarios o información legal.

Código paso a paso (comentado)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo de estructura semántica</title>
</head>
<body>

  <header>
    <h1>Mi sitio web</h1>
    <nav>
      <ul>
        <li><a href="#inicio">Inicio</a></li>
        <li><a href="#servicios">Servicios</a></li>
        <li><a href="#contacto">Contacto</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="inicio">
      <h2>Bienvenido a nuestra página</h2>
      <p>Este es el contenido principal de la página.</p>
    </section>

    <section id="servicios">
      <h2>Servicios que ofrecemos</h2>
      <ul>
        <li>Desarrollo web</li>
        <li>Diseño gráfico</li>
        <li>Consultoría tecnológica</li>
      </ul>
    </section>
  </main>

  <footer>
    <p>© 2025 Mi empresa. Todos los derechos reservados.</p>
  </footer>

</body>
</html>

En este ejemplo, el <header> contiene el título y el menú principal. El <nav> agrupa los enlaces de navegación para que los navegadores y lectores de pantalla los reconozcan fácilmente. El <main> agrupa el contenido más importante, dividido en dos <section> que separan temáticamente la bienvenida y los servicios. Finalmente, el <footer> contiene información del pie de página.

Resumen de los conceptos aprendidos

Las etiquetas semánticas ayudan a organizar el contenido de manera lógica y comprensible. Usar <header>, <nav>, <main>, <section> y <footer> mejora la accesibilidad, el SEO y hace el código más fácil de mantener.

Ejercicio práctico final basado en lo aprendido

Crea un archivo estructura.html que incluya:

Un encabezado con el nombre de un sitio ficticio y un menú con al menos tres enlaces usando <nav>.
Un área principal con al menos dos secciones temáticas usando <section>, cada una con un título y un párrafo.
Un pie de página con información de derechos de autor o contacto.

Guarda y abre el archivo en tu navegador, y revisa la estructura en el inspector de elementos para ver cómo está organizada.

Recomendaciones o tips adicionales

Aunque estas etiquetas se pueden reemplazar por <div>, es mucho mejor usar las etiquetas semánticas para dar significado al contenido. Esto facilita el trabajo a buscadores, asistentes de lectura y a ti como desarrollador para mantener el código limpio y organizado.

7 - HTML: Estructuras semánticas header, nav, main, section y footer

Subscribe to my newsletter

Carlos BC

Carlos BC