Qué hace la etiqueta div
<div> (abreviatura de division) es un contenedor genérico. Agrupa elementos para que puedas darles estilo, posicionarlos o manejarlos con scripts como una sola unidad. Por sí solo no se ve: sin margen, sin borde, sin tipo de letra especial. Es un elemento en bloque, así que empieza en una línea nueva y se estira a lo ancho del espacio disponible.
Quita la línea border del estilo y los divs se vuelven invisibles: ese es el aspecto por defecto de un div. Todo lo que hace visualmente viene del CSS.
div class e id
Un div normalmente lleva una class, que es el nombre al que apunta tu CSS. Los divs que comparten una clase comparten el estilo:
.card da estilo a las dos cajas, .card.highlight añade un contorno azul al div que tiene las dos clases. Usa id cuando necesites apuntar a un div concreto, por ejemplo como destino de un enlace (href="#pro"). La página de atributos compara class e id en detalle.
Divs uno al lado del otro
Como los divs son bloques, se apilan en vertical. Para colocarlos en fila, convierte a su padre en un contenedor flex:
display: flex en .row alinea a los hijos, gap los separa y los valores de flex reparten el ancho (1 : 2 : 1 aquí). Este patrón de padre e hijos es el uso más común de los divs en sitios reales. Para centrar un div, consulta cómo centrar un div.
Divs anidados
Los divs pueden contener otros divs a cualquier profundidad. Cada nivel es una caja dentro de otra caja, lo que puedes ver dándole a cada div un borde y algo de padding:
Mantén el anidamiento tan plano como lo permita el diseño. Cada envoltorio extra es una caja más en la que pensar cuando un margen o un ancho no hacen lo que esperas.
¿div o una etiqueta semántica?
Un div no dice nada de su contenido. HTML tiene etiquetas que hacen el mismo trabajo de agrupar y además dicen qué es el grupo:
| En lugar de | Usa | Para |
|---|---|---|
<div class="header"> | <header> | La introducción o barra superior de una página o sección |
<div class="nav"> | <nav> | Un bloque de enlaces de navegación |
<div class="main"> | <main> | El contenido principal, una vez por página |
<div class="post"> | <article> | Un elemento independiente: entrada, comentario, tarjeta de producto |
<div class="footer"> | <footer> | El pie de una página o sección |
Estas etiquetas se ven exactamente igual que un div hasta que les das estilo, pero los lectores de pantalla las anuncian y permiten saltar entre ellas, y los buscadores leen la estructura. Usa un div para cajas que solo existen por diseño o estilo, como el envoltorio .row de arriba. La página de HTML semántico cubre el conjunto completo.
Un div no es un botón
Un div con un manejador de clic parece clicable para quien usa el ratón, pero quien usa el teclado no puede llegar a él con Tab ni activarlo con Enter, y un lector de pantalla no lo anuncia como botón:
Usa <button> para acciones y <a href> para navegar. Los dos reciben el foco y funcionan con el teclado sin hacer nada más.
Errores comunes
- Un div dentro de un
<p>. El párrafo se cierra antes del div. Haz que el div sea el elemento exterior, o usa<span>dentro del párrafo. - Sopa de divs. Una página hecha solo de divs no tiene estructura para los lectores de pantalla. Cambia divs por
<header>,<nav>,<main>y<footer>donde encajen. - Divs clicables. Usa un
<button>o un enlace en su lugar. - Esperar que un div sea tan ancho como su texto. Un div ocupa todo el ancho. Usa
display: inline-block,width: fit-contento un<span>si quieres que se ajuste. - Repetir un id en varios divs. Usa una clase para todo lo que se repita.
Preguntas frecuentes
¿Qué es un div en HTML?
<div> es un contenedor genérico. Agrupa otros elementos para que puedas darles estilo o posicionarlos juntos, y no tiene significado propio: los navegadores lo muestran como un bloque que empieza en una línea nueva y ocupa todo el ancho disponible.
¿Qué significa div class?
<div class="card"> es un div con un atributo class. La clase es un nombre que el CSS usa para darle estilo (.card { ... }) y que JavaScript usa para encontrarlo. Muchos divs pueden compartir una clase, y un div puede tener varias: class="card featured".
¿Cómo pongo dos divs uno al lado del otro?
Envuélvelos en un div padre y dale al padre display: flex. Los hijos se colocan entonces en fila. Añade gap para separarlos y flex: 1 en los hijos para que se repartan el ancho por igual.
¿Debo usar div o section?
Usa <section>, <header>, <nav>, <main>, <article> o <footer> cuando el contenido tiene ese papel, porque los lectores de pantalla y los buscadores los entienden. Usa <div> cuando solo necesitas una caja para estilos o diseño.
¿Puedo poner un div dentro de una etiqueta p?
No. Un párrafo solo puede contener contenido en línea. El navegador cierra el <p> en cuanto ve un <div>, lo que rompe tus estilos. Usa un div como elemento exterior o un <span> dentro del párrafo.
