¿Qué es un div en HTML?

Mientras que elementos como `<header>` y `<footer>` describen el contenido que contienen, un div es genérico. Va dentro del cuerpo de un archivo HTML y puede contener casi cualquier elemento de los que pertenecen al cuerpo de la página (lo que HTML llama contenido de flujo), aunque no los que necesitan un elemento padre específico, como `<li>` o `<td>`.

Un div no tiene significado propio y los navegadores casi no le dan estilo predeterminado: se muestra como bloque, así que empieza en una línea nueva y ocupa todo el ancho de su contenedor, y nada más. El tamaño, el espaciado, el color y la posición vienen del CSS que tú escribes. Justo esa neutralidad es lo que lo hace útil: es un envoltorio multiusos al que puedes dar la forma que quieras.

Un ejemplo práctico

Aquí tienes un div que agrupa un encabezado y un párrafo en una tarjeta:

`<div class=”card”>`

` <h3>Summer sale</h3>`

` <p>Save 20% through August 31.</p>`

`</div>`

Con una sola regla de CSS le das estilo a todo el grupo a la vez:

`.card { border: 1px solid #ccc; padding: 16px; }`

Esa regla se aplica a la caja del div, así que el borde y el relleno envuelven el encabezado y el párrafo como una sola unidad. El atributo de clase (o un id) le da a CSS un identificador reutilizable para aplicar estilos justo a este div. CSS también puede seleccionar divs por nombre de elemento o por su posición en el documento, pero una clase mantiene la regla enfocada solo en las tarjetas que te interesan.

Div vs. span

Un div y un span hacen el mismo trabajo de agrupar, pero a dos escalas distintas:

• Div: un contenedor de nivel de bloque. Empieza en su propia línea y, de forma predeterminada, se estira hasta ocupar todo el ancho de su contenedor. Úsalo para agrupar bloques completos de contenido, como un encabezado con sus párrafos.
• Span: su contraparte en línea. Fluye dentro de una línea de texto sin romperla. Úsalo para dar estilo a unas cuantas palabras dentro de una oración, como resaltar una frase.

La regla para decidir: usa un div para agrupar bloques de contenido cuando no exista un contenedor semántico adecuado, como `<section>` o `<article>`, y un span para texto genérico dentro de una línea.

Cuándo un div es la opción correcta

La recomendación de MDN es usar un div solo cuando ningún elemento semántico se ajusta al contenido. HTML tiene elementos cuyos nombres describen lo que contienen: `<header>`, `<footer>`, `<nav>`, `<main>`, `<section>` y `<article>`. Los lectores de pantalla y los motores de búsqueda obtienen la estructura del documento a partir de esos nombres; un div no les dice nada sobre lo que hay dentro.

Por eso, envuelve la navegación de tu sitio en `<nav>`, no en un div. Usa un div cuando ningún elemento semántico corresponda y solo necesites agrupar por estilo o diseño, como juntar 3 tarjetas promocionales para acomodarlas en una fila.

Los divs en WordPress

No necesitas editar HTML a mano para trabajar con divs en WordPress. El editor de bloques los escribe por ti: el bloque Grupo envuelve todo su contenido en `<div class=”wp-block-group”>` de forma predeterminada, aunque en sus ajustes avanzados puedes elegir otro elemento HTML, como `<section>`. Además, los bloques que muestran el campo de clases CSS adicionales en sus ajustes avanzados aceptan ahí un nombre de clase extra.

Esa clase te da el mismo recurso que un atributo de clase escrito a mano. Así que, si quieres dar estilo a un sitio de WordPress, empieza por ahí: agrupa los bloques, agrega una clase y escribe una sola regla de CSS para ella.