Los contenedores genéricos como div y span son etiquetas HTML sin significado semántico que utilizamos exclusivamente para agrupar otros elementos o porciones de texto.
A diferencia de un párrafo o un encabezado, que tienen un propósito claro y un formato predefinido, estos contenedores son como cajas de cartón completamente vacías.
Las usamos para organizar nuestro contenido de forma lógica antes de empezar a darle estilos con CSS o a programarlo con JavaScript.
Además de ver estas etiquetas, nos van a venir muy bien para explicar un comportamiento de HTML. Todos los elementos HTML se dividen en dos grandes familias: los elementos de bloque y los elementos en línea.
Elementos de bloque: <div>
Un elemento de bloque es aquel que ocupa todo el ancho disponible de la pantalla por defecto, desde el extremo izquierdo hasta el derecho, empujando todo lo demás hacia abajo como si fuera un muro infranqueable.
La etiqueta div (de division) es el rey de los contenedores genéricos de bloque. Es vuestra caja de cartón grande.
<div>
<h2>Mi sección especial</h2>
<p>Este texto está dentro de un contenedor.</p>
</div>
Cuando metéis contenido dentro de un <div>, el navegador crea un salto de línea antes y después de la caja (aunque podremos modificar cosas con CSS, como veremos en su momento).
Las etiquetas que ya conocemos como los títulos (<h1>), los párrafos (<p>) o las listas (<ul>) son todas elementos de bloque por naturaleza.
Por eso un párrafo nunca se pone a la derecha de otro automáticamente.
Elementos en línea: <span>
Por otro lado, un elemento en línea es mucho más educado. Solo ocupa el ancho estrictamente necesario para envolver su contenido, sin forzar ningún salto de línea ni molestar a los vecinos.
La etiqueta span es el contenedor genérico en línea por excelencia. Es exactamente igual que coger un rotulador fluorescente y subrayar una palabra específica dentro de una frase continua.
<p>Mi color favorito es el <span class="texto-rojo">rojo pasión</span>, y no lo cambio por nada.</p>
Si en el ejemplo anterior hubiéramos usado un <div> en lugar de un <span> para agrupar la palabra “rojo pasión”, el navegador habría partido la frase en tres líneas distintas.
Los enlaces (<a>) y las imágenes (<img>) son el ejemplo perfecto de elementos en línea.
Podéis meter diez imágenes pequeñas seguidas en el código HTML, y el navegador las dibujará una al lado de la otra hasta que se acabe el espacio.
Cuándo usar div y cuándo usar span
Usad <div> cuando queráis agrupar bloques completos de contenido: una tarjeta, una sección visual, una columna o un contenedor que luego maquetaréis con CSS.
<div class="tarjeta-producto">
<h2>Arduino UNO</h2>
<p>Una placa estupenda para empezar.</p>
</div>
Usad <span> cuando queráis marcar un fragmento pequeño dentro de una línea de texto, normalmente para darle estilo o seleccionarlo con JavaScript.
<p>Estado del pedido: <span class="estado">Enviado</span></p>
