HTML div: todo lo que necesitas saber sobre el uso de co­n­te­ne­do­res div

La etiqueta div se utiliza para dividir y separar el contenido en HTML. Dado que el co­n­te­ne­dor div no tiene si­g­ni­fi­ca­do semántico propio, solo se re­co­mie­n­da su uso como último recurso, cuando se han agotado todas las otras vías.

Podemos hacernos una idea de lo que significa HTML div si nos fijamos en el origen del término. div deriva de la palabra inglesa division, es decir, “área”, “sección” o también “división” y “escisión”. Un co­n­te­ne­dor div sirve pri­n­ci­pa­l­me­n­te para contener a otros elementos HTML. Aunque nos permite po­si­cio­nar grupos y áreas, div no tiene su propio si­g­ni­fi­ca­do semántico en HTML. Su tarea principal es, por tanto, crear y delimitar áreas que luego puedan ser fo­r­ma­tea­das mediante CSS. El co­n­te­ne­dor div no influye en el diseño o el contenido de una página web.

Esto también implica que div ha dejado de jugar un papel im­po­r­ta­n­te en HTML. Aunque el co­n­te­ne­dor div se utilizaba con fre­cue­n­cia en versiones an­te­rio­res, su uso se vio reducido drá­s­ti­ca­me­n­te con la llegada de HTML5 y HTML 5.1. Solo se puede utilizar el co­n­te­ne­dor div para la es­tru­c­tu­ra si no se puede hacer uso de ningún otro elemento como, por ejemplo, article, aside, header, main, nav o section. Por ello, se re­co­mie­n­da buscar so­lu­cio­nes se­má­n­ti­ca­me­n­te más adecuadas antes de utilizar div en HTML. Como elemento de nivel de bloque, el co­n­te­ne­dor div se inserta en un salto de línea anterior y otro posterior.

HTML div se utiliza pri­n­ci­pa­l­me­n­te para dar formato con CSS a los elementos HTML que aparezcan de manera si­mu­l­tá­nea, con el fin de agrupar di­fe­re­n­tes bloques HTML y po­si­cio­nar­los de manera di­fe­re­n­cia­da, al igual que para animar co­n­te­ni­dos HTML y CSS con la ayuda de Ja­va­S­cri­pt. Con el siguiente ejemplo, puedes ver cómo se construye un co­n­te­ne­dor div sin atributos:

En un principio, dentro de un co­n­te­ne­dor div se puede colocar casi cualquier contenido fluido. En HTML, div no tiene ningún efecto sobre la pre­se­n­ta­ción del contenido, sino que úni­ca­me­n­te lo delimita.

div solo soporta los atributos globales en HTML. align es una excepción a esta regla, puesto que desde la in­tro­du­c­ción de HTML5 ya no se puede usar junto a los co­n­te­ne­do­res div. Los atributos HTML más uti­li­za­dos con div son class e id. Aquí puedes ver dos ejemplos de co­n­te­ne­do­res div con atributos:

El atributo id también se puede utilizar junto a un co­n­te­ne­dor div sin problema alguno:

Hay varias razones por las que div ya no juega un papel im­po­r­ta­n­te en HTML. No se trata tanto de los problemas que conlleva un co­n­te­ne­dor div, sino del hecho de que las etiquetas HTML se­má­n­ti­cas es­tru­c­tu­ran los datos mucho mejor y, por tanto, facilitan mucho el ma­n­te­ni­mie­n­to. Las co­rre­c­cio­nes dentro del propio documento también se pueden hacer de manera mucho más rápida uti­li­za­n­do otros objetos como son el header, footer, article o section. Si aprendes HTML o CSS, también es bueno conocer div; sin embargo, deberías usar elementos se­má­n­ti­ca­me­n­te más apro­pia­dos.