Nivel: Intro · HTML · Después del esqueleto básico · 12 minutos
Respuesta corta: usa
<div>cuando necesitas un bloque genérico para agrupar secciones (ocupa todo el ancho disponible por defecto). Usa<span>cuando quieres marcar un trozo en línea dentro de un texto (una palabra, un precio) sin romper el párrafo. Ninguno aporta significado semántico: son cajas neutrales; para significado preferirásheader,main, etc.
Tras formularios y tablas, llega la confusión clásica: «¿todo va en div?». Aquí una tabla comparativa, casos concretos y una recomendación según perfil.
Tabla comparativa: div vs span
| Criterio | div |
span |
|---|---|---|
| Display por defecto | block (bloque) | inline (en línea) |
| Rompe el párrafo | Sí (nueva «caja») | No |
| Uso típico | Agrupar layout / secciones genéricas | Resaltar un fragmento de texto |
| Semántica | Ninguna | Ninguna |
| Puede contener bloques | Sí (p, listas, otros div…) | Solo contenido en línea (texto, a, img…) |
| Ideal con CSS | Contenedores, grids, cards | Color, peso, badge pequeño |
| Frase guía | «Caja de sección» | «Marca dentro de la frase» |
<div class="tarjeta">
<p>Precio: <span class="oferta">$9.99</span></p>
</div>
Caso 1: maquetar una tarjeta
Una tarjeta con título + párrafo + botón suele ir envuelta en un div (o mejor en article si es contenido). Varios div anidados agrupan cabecera y cuerpo. Un span no serviría como contenedor de esa tarjeta: no está pensado para bloques grandes.
Caso 2: resaltar una palabra
«Hoy hay oferta en el curso». En HTML real usarías <span class="oferta">oferta</span> (o <strong> si es énfasis semántico). Meter esa palabra en un div partiría el párrafo en varios bloques y se vería raro.
Caso 3: ¿puedo usar solo divs para toda la página?
Técnicamente sí; es mala práctica. Pierdes semántica (SEO, accesibilidad). Reserva div/span para cuando no hay etiqueta con significado. Prefiere header, nav, main, footer cuando describan la región.
Mini-ejercicio
Badge de «Nuevo» junto a un título → span. Contenedor de tres columnas → div (o elementos semánticos + CSS). ¿Un span con un ul dentro? → inválido / incorrecto: el span no debe envolver bloques.
Recomendación según perfil
- Estudiante: memoriza block vs inline; practica un ejemplo de cada.
- Docente: pide reescribir una página «todo-div» usando etiquetas semánticas.
- Autodidacta: inspecciona cualquier sitio: verás divs de layout y spans de estilo.
Para seguir: semántica con header, nav, main y footer — regiones con significado.
