Curso de HTML / Cuándo utilizar div y span como contenedores

div y span agrupan contenido sin añadir un significado específico. Se utilizan cuando CSS o JavaScript necesitan un objetivo y ningún elemento más concreto describe correctamente la función. div puede agrupar contenido de flujo, mientras que span corresponde al contenido de frase dentro de un pasaje de texto.

Agrupar sin cambiar la función del contenido

Un contenedor genérico no afirma que su contenido sea un encabezado, una advertencia o un botón. Puede reunir una tarjeta de producto o identificar unas palabras para aplicarles estilos. Si la región tiene una función reconocible, busca primero un elemento semántico adecuado.

Por defecto, div suele presentarse como bloque y span en línea. CSS puede modificar su display, por lo que esa apariencia inicial no basta para decidir cuál usar. Tampoco necesitas añadir contenedores si tu único problema es el espacio entre párrafos o un salto de línea.

Aplicar estilos a una tarjeta y a su precio

Coloca este fragmento HTML dentro de body de un documento completo. El contenedor agrupa el encabezado y el párrafo, mientras que el span identifica solo el precio:

<div class="product-card">

  <h2>Travel mug</h2>

  <p>Price: <span class="price">$15</span></p>

</div>

Añade el siguiente CSS dentro de style en head o en una hoja de estilos enlazada:

.product-card {

  padding: 16px;

  border: 1px solid #dadada;

}

.price {

  color: #075cb4;

  font-weight: 700;

}

El resultado debe mostrar un borde alrededor de la tarjeta y el precio con color y peso distintos. Aunque desactives los estilos, el producto conserva su encabezado y el precio permanece en un párrafo. Esas funciones las aportan h2 y p, no el contenedor.

Si el precio no cambia, comprueba que class="price" coincide con el selector .price. El punto forma parte del selector CSS, no del nombre de clase escrito en el HTML. Modifica una regla cada vez y restaura el valor al terminar la comparación.

Preferir un elemento que ya exprese la intención

Para una navegación principal, considera nav. Para una pieza independiente, article. Para una acción que el usuario pueda activar, usa un botón apropiado en lugar de un span con un evento de clic.

Un elemento nativo transmite significado y suele incluir comportamientos de teclado que tendrías que reproducir manualmente con un contenedor genérico. Los tipos de button permiten elegir entre envío, reinicio y una acción programada. Pintar un span como botón no añade esas funciones.

En el ejemplo, el precio solo necesita una selección de estilo, por lo que span es suficiente. Puedes conservar una clase al cambiar posteriormente a un elemento con significado, si la función del contenido lo justifica.

Separar el contenido permitido de display

El contenido de flujo incluye elementos de la organización general, como párrafos o listas. El contenido de frase se usa dentro de pasajes de texto, como texto, énfasis y enlaces. Estas categorías describen dónde se puede colocar un elemento; no son nombres alternativos para “ocupa una línea” y “no ocupa una línea”.

<!-- Nonconforming: a paragraph inside span -->
<span class="card"><p>Product description</p></span>

<!-- A wrapper that permits the paragraph -->
<div class="card"><p>Product description</p></div>

El primer caso es intencionadamente no conforme: un párrafo no debe estar dentro de ese span. El segundo emplea un contenedor que permite el párrafo. Escribir span { display: block; } no modifica su modelo de contenido ni corrige la anidación.

Compara las dos versiones por separado y conserva la clase en el contenedor correcto. Si necesitas revisar las relaciones, consulta las referencias de div y span de MDN. Evita tanto construir todas las regiones con contenedores genéricos como asignar significados que el contenido no tiene.