HTML5 semántico

Aprende a usar las etiquetas semánticas de HTML5 para estructurar páginas de forma correcta, accesible y optimizada para buscadores.

Antes de HTML5, todo se estructuraba con <div> y <span>. El resultado era código ilegible y páginas que los lectores de pantalla y los buscadores apenas entendían. HTML5 introdujo etiquetas semánticas: elementos que describen el significado de su contenido, no solo su posición.

¿Por qué importa la semántica?

<!-- ❌ Sin semántica: ¿qué es cada cosa? -->
<div id="header">...</div>
<div id="nav">...</div>
<div id="main">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>

<!-- ✅ Con semántica: el código se explica solo -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

Ambos se ven igual en el navegador. Pero el segundo es accesible, mejor indexado por Google y más fácil de mantener.

Las etiquetas semánticas principales

Cabecera de la página o de una sección. Suele contener logo, título principal y navegación:

<header>
  <a href="/">
    <img src="/logo.png" alt="Logo" />
  </a>
  <nav>
    <a href="/cursos">Cursos</a>
    <a href="/about">Sobre mí</a>
  </nav>
</header>

Bloque de navegación principal. Solo para grupos de enlaces de navegación importantes:

<nav aria-label="Navegación principal">
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/cursos">Cursos</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</nav>

<main>

Contenido principal de la página. Solo debe haber uno por página y no debe contener contenido que se repite entre páginas (header, nav, footer):

<main>
  <h1>Aprende HTML desde cero</h1>
  <p>El contenido principal va aquí.</p>
</main>

<article>

Contenido independiente que tiene sentido por sí solo: una entrada de blog, un post, una noticia, una tarjeta de producto:

<article>
  <h2>¿Qué es HTML?</h2>
  <p>HTML es el lenguaje de marcado...</p>
  <footer>
    <time datetime="2026-03-18">18 de marzo de 2026</time>
  </footer>
</article>

<section>

Agrupa contenido temáticamente relacionado dentro de una página. Siempre debería tener un heading:

<section>
  <h2>Cursos disponibles</h2>
  <article>...</article>
  <article>...</article>
</section>

<section>
  <h2>Sobre el autor</h2>
  <p>...</p>
</section>

<aside>

Contenido relacionado pero secundario al contenido principal: barra lateral, notas, publicidad, enlaces relacionados:

<aside>
  <h3>Artículos relacionados</h3>
  <ul>
    <li><a href="/css">Aprende CSS</a></li>
    <li><a href="/js">Aprende JavaScript</a></li>
  </ul>
</aside>

Pie de página o de sección. Suele contener copyright, enlaces legales, redes sociales:

<footer>
  <p>© 2026 ELDATA. Todos los derechos reservados.</p>
  <nav aria-label="Pie de página">
    <a href="/privacy">Privacidad</a>
    <a href="/cookies">Cookies</a>
  </nav>
</footer>

Etiquetas de contenido específico

<!-- Fecha y hora legible por máquinas -->
<time datetime="2026-03-18">18 de marzo de 2026</time>

<!-- Resultado de un cálculo -->
<output for="precio cantidad">Total: 45€</output>

<!-- Barra de progreso -->
<progress value="70" max="100">70%</progress>

<!-- Medidor (ej: uso de disco) -->
<meter value="6" min="0" max="10" low="3" high="8" optimum="5">6/10</meter>

<!-- Detalles expandibles (accordion nativo) -->
<details>
  <summary>Ver más información</summary>
  <p>Este contenido está oculto hasta que el usuario expande el bloque.</p>
</details>

<!-- Diálogo modal nativo -->
<dialog id="modal">
  <p>¿Estás seguro?</p>
  <button onclick="this.closest('dialog').close()">Cerrar</button>
</dialog>

Estructura completa de una página semántica

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ELDATA — Aprende desarrollo web</title>
  </head>
  <body>
    <header>
      <a href="/"><img src="/logo.png" alt="ELDATA" /></a>
      <nav aria-label="Principal">
        <a href="/cursos">Cursos</a>
        <a href="/blog">Blog</a>
      </nav>
    </header>

    <main>
      <section>
        <h1>Aprende HTML desde cero</h1>
        <p>El lenguaje base de toda la web.</p>
      </section>

      <section>
        <h2>Lecciones del curso</h2>
        <article>
          <h3><a href="/cursos/html/01-que-es-html">¿Qué es HTML?</a></h3>
          <p>Descubre qué es y para qué sirve.</p>
        </article>
      </section>
    </main>

    <aside>
      <h2>Cursos relacionados</h2>
      <a href="/cursos/css">Curso de CSS</a>
    </aside>

    <footer>
      <p>© 2026 ELDATA</p>
    </footer>
  </body>
</html>

Has completado el curso de HTML

Con esto tienes una base sólida: estructura, texto, enlaces, imágenes, listas, tablas, formularios y semántica. Es suficiente para construir páginas reales y el punto de partida perfecto para el siguiente paso: CSS.

El siguiente curso, Curso de CSS, coge todo esto y le da vida visual.

Y si quieres una referencia rápida para repasar etiquetas, atributos, formularios, tablas e imágenes, tienes la Cheat Sheet completa de HTML.