HTML

Semántica HTML: estructura con header, main, section

Organiza el contenido con etiquetas semánticas para mejorar accesibilidad, SEO y mantenimiento.

¿Cuánto sabes de HTML?

📘 Teoría

Mapa de etiquetas semánticas

Cada etiqueta tiene un rol claro en la página.

header

Introduce la página y suele contener logotipo o navegación.

nav

Agrupa enlaces de navegación principal o secundaria.

main

Contiene el contenido principal único.

section

Agrupa contenido relacionado dentro de un tema.

article

Bloque independiente que puede sindicarse o reutilizarse.

aside

Contenido complementario (bio, enlaces, widgets).

footer

Cierre de la página con info legal o enlaces.

Reglas de oro

Buenas prácticas para no romper la semántica.

Cada página debe tener un solo main. Dentro, organiza el contenido en secciones con títulos coherentes.

article se usa cuando el contenido tiene sentido por sí mismo (post, noticia, card).

Un solo por página.
No anidar dentro de .
Usa solo cuando haya navegación real.
Evita si existe una etiqueta semántica precisa.

Layout semántico completo

Un esqueleto común para blogs y landing pages.

Layout semántico

<header>
  <h1>Mi blog</h1>
  <nav>
    <a href="#articulos">Artículos</a>
    <a href="#sobre">Sobre</a>
  </nav>
</header>

<main>
  <section id="articulos">
    <h2>Últimos artículos</h2>
    <article>
      <h3>Aprender HTML</h3>
      <p>Un texto de ejemplo…</p>
    </article>
  </section>

  <aside id="sobre">
    <h2>Sobre mí</h2>
    <p>Escribe una mini bio.</p>
  </aside>
</main>

<footer>© 2026 — Hecho con semántica.</footer>

1 Mapa de etiquetas semánticas 2 Reglas de oro 3 Layout semántico completo

🧭 Visuales clave

Mapa general de semántica HTML

Resume la función de los bloques semánticos principales y sirve como referencia rápida al montar la estructura de una página.

Diagrama general de etiquetas semánticas HTML y su papel dentro de una página

Flujo de decisión para elegir etiquetas semánticas

Viene bien cuando dudas entre section, article, aside o bloques más genéricos y necesitas un criterio visual rápido.

Diagrama de flujo para decidir entre etiquetas semánticas HTML según el tipo de contenido

Flujo semántico de una página HTML

Ayuda a entender la lectura global de la página y cómo se relacionan header, main, section, article y footer en conjunto.

Esquema de flujo del recorrido semántico dentro de una página HTML

🧪 Aprende probando

Ejemplo Layout semántico Cambia títulos, añade secciones y observa la estructura en el preview.

⌄

Ejemplo Demo interactiva: arquitectura semántica con main, article y aside Recorre una estructura real y observa el papel de `time`, `address` y `figure` en contexto.

⌄

Ejemplo Lista de artículos con semántica Convierte tarjetas en articles con heading y meta.

⌄