div

El término div es una abreviatura de division (división) y funciona como un contenedor genérico en el lenguaje de marcado HTML. A diferencia de otros elementos que tienen un significado semántico intrínseco (como header para el encabezado o footer para el pie de página), el div no aporta ningún significado al contenido que alberga. Su propósito principal es agrupar diversos elementos para facilitar la aplicación de estilos mediante CSS o la manipulación a través de JavaScript.

Uso Semántico y Buenas Prácticas

En el desarrollo web moderno, existe una tendencia a evitar el uso excesivo de div, una práctica conocida como "divitis". Se recomienda priorizar elementos semánticos que describan mejor la función del contenido. Por ejemplo, si un contenedor representa una sección independiente de la página, es preferible usar section en lugar de div.

❌ Uso excesivo: Utilizar un div para todo el esquema de la página.
✅ Uso correcto: Utilizar un div únicamente cuando no exista un elemento semántico más apropiado para agrupar el contenido por razones de diseño o maquetación.

Diferencias Conceptuales

Es fundamental distinguir entre div y span. Aunque ambos son contenedores genéricos, difieren en su comportamiento predeterminado en el navegador:

div: Es un elemento de bloque (block-level), lo que significa que comienza en una nueva línea y ocupa todo el ancho disponible del contenedor padre.
span: Es un elemento de línea (inline), lo que significa que solo ocupa el espacio necesario para su contenido y no provoca un salto de línea.

Por ejemplo, se usaría un div para crear una columna lateral completa en un sitio web, mientras que se usaría un span para cambiar el color de una sola palabra dentro de un párrafo.