HTML semántico: los *defaults* ya son buenos

Antes de escribir CSS, escribe HTML. Bien.

Qué significa "semántico"

Usar la etiqueta que describe el propósito, no la apariencia:

• <nav> para navegación, no <div class="nav">.
• <main> para el contenido principal.
• <article> para contenido autónomo (un post, una ficha de producto).
• <aside> para contenido relacionado pero separable.
• <header> / <footer> para cabeceras y pies (tanto del sitio como de un <article>).
• <section> para agrupaciones temáticas con título.
• <button> para acciones, <a> para navegación. Nunca al revés.

Beneficios inmediatos

Accesibilidad gratuita. Los lectores de pantalla entienden estructura sin ARIA. Los usuarios de teclado navegan por landmarks.

SEO mejor. Los motores entienden jerarquía.

CSS más sencillo. article > header > h1 es un selector útil. Si todo son <div>, necesitas clases para todo.

Menos clases. Pico CSS, classless, demuestra que con HTML semántico ya tienes el 80% del camino hecho.

Ejemplos prácticos

Una lista de posts:

<ol class="post-list" reversed>
  <li>
    <article>
      <h3><a href="/post">Título</a></h3>
      <time datetime="2026-04-23">23 abril 2026</time>
      <p>Descripción...</p>
    </article>
  </li>
</ol>

Una tarjeta de proyecto:

<article>
  <header>
    <h2>Nombre del proyecto</h2>
    <p>Front-end · 2025</p>
  </header>
  <p>Descripción de lo que hice.</p>
  <footer>
    <a href="https://...">Visita</a>
  </footer>
</article>

Sin clases. Cada etiqueta describe su propósito.

Regla de mano

Si te estás inventando una clase como .wrapper, .container, .inner o .box, pregúntate si es realmente un <div> o si podría ser <article>, <section>, <aside>, <nav> o <figure>.

El 80% de las veces, existe una etiqueta mejor.