HTML div: todo lo que necesitas saber sobre el uso de contenedores div

La etiqueta div se utiliza para dividir y separar el contenido en HTML. Dado que el contenedor div no tiene significado semántico propio, solo se recomienda su uso como último recurso, cuando se han agotado todas las otras vías.

Dominios web
Compra y registra tu dominio ideal
  • Domina el mercado con nuestra oferta 3x1 en dominios
  • Tu dominio protegido con SSL Wildcard gratis
  • 1 cuenta de correo electrónico por contrato

¿Qué es un contenedor div y para qué sirve?

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 contenedor div sirve principalmente para contener a otros elementos HTML. Aunque nos permite posicionar grupos y áreas, div no tiene su propio significado semántico en HTML. Su tarea principal es, por tanto, crear y delimitar áreas que luego puedan ser formateadas mediante CSS. El contenedor 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 importante en HTML. Aunque el contenedor div se utilizaba con frecuencia en versiones anteriores, su uso se vio reducido drásticamente con la llegada de HTML5 y HTML 5.1. Solo se puede utilizar el contenedor div para la estructura si no se puede hacer uso de ningún otro elemento como, por ejemplo, article, aside, header, main, nav o section. Por ello, se recomienda buscar soluciones semánticamente más adecuadas antes de utilizar div en HTML. Como elemento de nivel de bloque, el contenedor div se inserta en un salto de línea anterior y otro posterior.

¿Cómo se utiliza div en HTML?

HTML div se utiliza principalmente para dar formato con CSS a los elementos HTML que aparezcan de manera simultánea, con el fin de agrupar diferentes bloques HTML y posicionarlos de manera diferenciada, al igual que para animar contenidos HTML y CSS con la ayuda de JavaScript. Con el siguiente ejemplo, puedes ver cómo se construye un contenedor div sin atributos:

<div>
<h2>Lista de ejemplos</h2>
<ul>
<li>Primer elemento de la lista</li>
<li>Segundo elemento de la lista</li>
<li>Tercer elemento de la lista</li>
<li>Cuarto elemento de la lista</li>
</ul>
</div>

En un principio, dentro de un contenedor div se puede colocar casi cualquier contenido fluido. En HTML, div no tiene ningún efecto sobre la presentación del contenido, sino que únicamente lo delimita.

¿Qué atributos soporta el contenedor div?

div solo soporta los atributos globales en HTML. align es una excepción a esta regla, puesto que desde la introducción de HTML5 ya no se puede usar junto a los contenedores div. Los atributos HTML más utilizados con div son class e id. Aquí puedes ver dos ejemplos de contenedores div con atributos:

<div class="Ejemplo">
<h2>Este es un ejemplo de titular</h2>
<p>Aquí puedes insertar un texto de muestra delimitado por el contenedor div.</p>
</div>

El atributo id también se puede utilizar junto a un contenedor div sin problema alguno:

<div id="Ejemplo">
<ul>
<li><a href="index.html" title="A la página de inicio">Página de inicio</a></li>
<li><a href="contact.html" title="Escríbenos">Contacto</a></li>
<li><a href="about.html" title="Sobre nosotros">Acerca de</a></li>
</ul>
</div>

Conclusión: div en HTML es en gran medida una cosa del pasado

Hay varias razones por las que div ya no juega un papel importante en HTML. No se trata tanto de los problemas que conlleva un contenedor div, sino del hecho de que las etiquetas HTML semánticas estructuran los datos mucho mejor y, por tanto, facilitan mucho el mantenimiento. Las correcciones dentro del propio documento también se pueden hacer de manera mucho más rápida utilizando 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 semánticamente más apropiados.

Consejo

¿Sabes mejor que nadie cómo debe ser tu propia web? Con el editor de páginas web de IONOS puedes crear tu propia presencia online profesional de forma sencilla. No obstante, si necesitas ayuda, nuestros expertos están encantados de ayudarte.

¿Le ha resultado útil este artículo?