Volver al índiceDivisiones: la etiqueta <div>

En esta página se tratan los siguientes temas:


Qué es una división <div>

La etiqueta <div> define una división. Esta etiqueta permite agrupar varios elementos de bloque (párrafos, encabezados, listas, tablas, divisiones, etc). En principio, los navegadores no muestran nada especial cuando se crea una división, salvo que se dé formato a la división con la hoja de estilo.

Nota: Hay gente y programas que llaman "capas" a las divisiones. No estoy seguro, pero supongo que ese término se debe a que Netscape 4.0 introdujo una etiqueta llamada <layer> (etiqueta que no formó parte de ninguna recomendación del W3C) que jugaba un papel similar a la etiqueta <div>.

En los ejemplos siguientes hay dos divisiones que incluyen tres párrafos cada una. En el primer ejemplo no puede reconocerse si hay divisiones o no, mientras que en el segundo sí.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
<div>
<p>El hombre es fuego; la mujer, estopa; llega el diablo y sopla.</p>
<p>Para el amor y la muerte, no hay cosa fuerte.</p>
<p>Viejo el pajar, malo de encender y peor de apagar.</p>
</div>

<div>
<p>¿Enseñas sin saber? Como no sea el culo, no sé qué.</p>
<p>Practicar hace maestro; que no leer en el cuaderno.</p>
<p>Lo que natura no da, Salamanca no presta</p>
</div>

El hombre es fuego; la mujer, estopa; llega el diablo y sopla.

Para el amor y la muerte, no hay cosa fuerte.

Viejo el pajar, malo de encender y peor de apagar.

¿Enseñas sin saber? Como no sea el culo, no sé qué.

Practicar hace maestro; que no leer en el cuaderno.

Lo que natura no da, Salamanca no presta

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
div { 
}
Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
div { 
  background-color: lightblue; 
  margin: 10px; 
}

El hombre es fuego; la mujer, estopa; llega el diablo y sopla.

Para el amor y la muerte, no hay cosa fuerte.

Viejo el pajar, malo de encender y peor de apagar.

¿Enseñas sin saber? Como no sea el culo, no sé qué.

Practicar hace maestro; que no leer en el cuaderno.

Lo que natura no da, Salamanca no presta

Una división no puede insertarse dentro de una etiqueta en-línea (<strong>,<em>, etc.) o de un bloque de texto (párrafo <p>, encabezado <h1> ... <h6>, dirección <address>, pre-formateado <pre>, lista, etc), pero si puede insertarse dentro de una tabla, de un bloque de cita <blockquote> o de una división <div>.

Volver al principio de la página


Divisiones anidadas

La etiqueta <div> se puede anidar (es decir, que una división puede contener otras divisiones), por lo que se utiliza para estructurar en bloques el contenido de la página web.

Para distinguir unas divisiones de otras en la hoja de estilo se pueden utilizar clases o selectores de tipo o selectores de descendientes, como en el ejemplo siguiente:

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
<div>
<div>
<p>El hombre es fuego; la mujer, estopa; llega el diablo y sopla.</p>
<p>Para el amor y la muerte, no hay cosa fuerte.</p>
<p>Viejo el pajar, malo de encender y peor de apagar.</p>
</div>

<div>
<p>¿Enseñas sin saber? Como no sea el culo, no sé qué.</p>
<p>Practicar hace maestro; que no leer en el cuaderno.</p>
<p>Lo que natura no da, Salamanca no presta</p>
</div>
</div>

El hombre es fuego; la mujer, estopa; llega el diablo y sopla.

Para el amor y la muerte, no hay cosa fuerte.

Viejo el pajar, malo de encender y peor de apagar.

¿Enseñas sin saber? Como no sea el culo, no sé qué.

Practicar hace maestro; que no leer en el cuaderno.

Lo que natura no da, Salamanca no presta.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
div { 
  border: black 3px solid; 
  margin: 10px; 
  padding: 10px; 
}

div div { 
  background-color: lightblue;
  border: none;
}

En este ejemplo tenemos una división que contiene dos divisiones que a su vez contienen tres párrafos cada una. El primer selector de la hoja de estilo (div) se aplica a las tres divisiones, pero el segundo selector (div div) se aplica a las divisiones contenidas dentro de divisiones, es decir, las dos divisiones interiores.

A las divisiones interiores se le aplican tanto las propiedades del primer selector (div) como las del segundo (div div). Por eso, para que las divisiones interiores no tengan el borde definido en el primer selector (div), hace falta quitarlo en el segundo selector (div div).

Volver al principio de la página


Cuándo utilizar una división

Las divisiones son elementos muy útiles, puesto que permiten agrupar elementos, pero hay que evitar las divisiones innecesarias. Por ejemplo, en general no suele ser necesario crear divisiones cuando sólo contienen un elemento.

Los dos ejemplos siguientes ilustran esa situación. En el primer ejemplo, se han creado tres divisiones (una por cada párrafo) para dar el color de fondo. Esas divisiones son innecesarias, directamente se podía haber dado color de fondo a los párrafos, como se ha hecho en el segundo ejemplo. El resultado es idéntico en ambos casos.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
<div>
<p>El hombre es fuego; la mujer, estopa; llega el diablo y sopla.</p>
</div>

<div><p>Para el amor y la muerte, no hay cosa fuerte.</p>
</div>

<div><p>Viejo el pajar, malo de encender y peor de apagar.</p>
</div>

El hombre es fuego; la mujer, estopa; llega el diablo y sopla.

Para el amor y la muerte, no hay cosa fuerte.

Viejo el pajar, malo de encender y peor de apagar.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
div { 
  background-color: lightblue; 
}

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
<p>El hombre es fuego; la mujer, estopa; llega el diablo y sopla.</p>

<p>Para el amor y la muerte, no hay cosa fuerte.</p>

<p>Viejo el pajar, malo de encender y peor de apagar.</p>

El hombre es fuego; la mujer, estopa; llega el diablo y sopla.

Para el amor y la muerte, no hay cosa fuerte.

Viejo el pajar, malo de encender y peor de apagar.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p { 
  background-color: lightblue; 
}

Volver al principio de la página

Última modificación de esta página: 22 de diciembre de 2011

Licencia de Creative Commons
Páginas web HTML / XHTML y hojas de estilo CSS por Bartolomé Sintes Marco
se distribuye bajo una Licencia Creative Commons Reconocimiento-CompartirIgual 4.0 Internacional (CC BY-SA 4.0).