¿Cuándo debo usar «div» y cuándo etiquetas semánticas?

La regla general es: prioriza siempre el uso de una etiqueta semántica si existe una que describa adecuadamente el propósito de tu contenido.

Cuándo usar etiquetas semánticas:

Debes optar por etiquetas semánticas (como <article>, <section>, <nav>, <aside>, <header>, <footer>, <main>, <figure>, <figcaption>, <time>, etc.) siempre que el bloque de contenido que estás creando tenga un significado estructural o un propósito claro en el documento.

• <article>: Para contenido independiente y auto-contenido (un post de blog, un comentario, un widget).
• <section>: Para agrupar contenido temáticamente relacionado.
• <nav>: Para bloques de enlaces de navegación principales.
• <aside>: Para contenido tangencialmente relacionado con el contenido principal (barras laterales, llamadas).
• <header> y <footer>: Para las cabeceras y pies de página de un documento o de una sección.
• <main>: Para el contenido principal o central del documento.

<article>
  <header>
    <h2>Título de mi Artículo</h2>
    <p>Publicado el <time datetime="2025-05-28">28 de mayo de 2025</time></p>
  </header>
  <p>Este es el contenido principal del artículo...</p>
  <footer>
    <p>Autor: HTML Moderno</p>
  </footer>
</article>
Lenguaje del código: PHP (php)

Cuándo usar <div>:

El <div> es un contenedor genérico de bloque sin ningún significado semántico inherente. Su uso es apropiado en las siguientes situaciones:

1. Para agrupar elementos con fines puramente estilísticos (CSS): Cuando necesitas un contenedor para aplicar estilos específicos (como un fondo, un borde, o para crear una disposición con Flexbox o Grid) y ninguna etiqueta semántica describe lógicamente ese grupo.
2. Para agrupar elementos con fines de comportamiento (JavaScript): Si necesitas un «gancho» para manipular un conjunto de elementos con JavaScript y el grupo no tiene un significado semántico propio.
3. Como último recurso: Si después de considerar todas las opciones semánticas, ninguna se ajusta adecuadamente al propósito del bloque.

<div class="contenedor-tarjetas">
  <article class="tarjeta">...</article>
  <article class="tarjeta">...</article>
</div>
Lenguaje del código: PHP (php)

La idea es evitar la «divitis» (el uso excesivo de <div>s donde podrían usarse etiquetas semánticas). Para agrupaciones genéricas que son en línea (dentro de un párrafo, por ejemplo) en lugar de en bloque, la etiqueta equivalente sin semántica es <span>.