HTML semántico: estructura de una página con ejemplos

El HTML semántico utiliza etiquetas que explican la función del contenido: nav identifica navegación, main el contenido principal y article una pieza con sentido propio. La elección depende de lo que significa cada bloque, no del color o de su posición en pantalla.

Una página construida solo con div puede verse bien, pero comunica menos información estructural. En esta guía aprenderás a elegir etiquetas sin convertir cada contenedor en una sección.

Etiquetas semánticas que usarás con más frecuencia

• header: contenido introductorio de una página o una sección.
• nav: bloques principales de navegación.
• main: contenido dominante del documento.
• section: agrupación temática de contenido, normalmente identificada por un encabezado.
• article: contenido independiente, como una entrada de blog.
• aside: información relacionada de forma secundaria.
• footer: información de cierre de una página o sección.

Estas etiquetas no crean automáticamente un diseño responsive. La presentación y la distribución siguen correspondiendo a CSS.

Ejemplo de estructura semántica completa

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mi guía de desarrollo web</title>
</head>
<body>
  <a href="#contenido">Saltar al contenido</a>
  <header>
    <p>Mi proyecto web</p>
    <nav aria-label="Principal">
      <a href="/">Inicio</a>
      <a href="/tutoriales/">Tutoriales</a>
    </nav>
  </header>
  <main id="contenido">
    <article>
      <h1>Cómo empezar con HTML</h1>
      <p>Una introducción para tu primera página.</p>
      <section>
        <h2>Prepara tu proyecto</h2>
        <p>Crea una carpeta y un archivo index.html.</p>
      </section>
      <section>
        <h2>Escribe el contenido</h2>
        <p>Añade títulos, párrafos y enlaces.</p>
      </section>
    </article>
    <aside aria-labelledby="recursos">
      <h2 id="recursos">Recursos relacionados</h2>
      <p>Consulta más ejercicios para practicar.</p>
    </aside>
  </main>
  <footer><p>Proyecto de aprendizaje de HTML.</p></footer>
</body>
</html>

Las rutas de navegación son ejemplos que debes adaptar a tu proyecto. El enlace de salto facilita llegar directamente al contenido principal, especialmente cuando hay una cabecera extensa.

Section, article o div: cómo elegir

Pregúntate si el contenido podría funcionar como una pieza independiente. Una noticia suele encajar en article. Dentro de ella, una explicación temática con título puede ser una section. Si solo necesitas envolver dos elementos para aplicarles una cuadrícula, un div puede ser la opción correcta.

Una tarjeta no es automáticamente un artículo ni cada bloque con fondo diferente necesita section. El aspecto visual no basta para decidir.

Cómo organizar los encabezados

Utiliza un título principal claro y distribuye los apartados por niveles. No elijas h4 solo porque te gusta su tamaño; cambia el tamaño con CSS. Tampoco confíes en que anidar etiquetas section reajustará por sí solo los niveles de encabezado.

Consulta la diferencia entre H1, H2, H3 y H4 para ver cómo mantener una jerarquía comprensible.

Qué aporta a accesibilidad y SEO

Una estructura adecuada ayuda a describir las regiones y relaciones del documento. Puede facilitar que las tecnologías de asistencia encuentren la navegación y el contenido principal. También hace el código más comprensible para quienes lo mantienen.

Utilizar etiquetas semánticas no garantiza mejores posiciones en Google. El contenido útil, el acceso de los buscadores y otros factores siguen siendo relevantes. No añadas etiquetas ni roles solo para intentar obtener una ventaja SEO.

Errores habituales

• Crear varios elementos main visibles dentro de la misma página.
• Usar nav para cualquier grupo de enlaces, aunque no sea un bloque de navegación.
• Añadir roles redundantes, como role="main" a un main sin necesidad.
• Elegir una etiqueta por su estilo predeterminado.
• Usar encabezados vacíos o sin relación con su contenido.

Preguntas frecuentes

¿Tengo que eliminar todos los div?

No. Son contenedores válidos cuando no necesitas expresar un significado más específico.

¿Puede un artículo tener header y footer?

Sí. Pueden describir la introducción y el cierre de esa pieza, además de existir una cabecera y un pie globales.

Para practicar, revisa tu última página e identifica qué contenedores tienen una función clara. Continúa en la ruta de aprendizaje de HTML.

Referencia técnica: documentación de main en MDN.