Divisiones <div>

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: Hace años a veces se llamaba "capas" a las divisiones. No estoy seguro, pero supongo que ese término se debía 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í.

<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 {
}
Enlace externo
div {
  background-color: lightblue;
  margin: 10px;
}
Enlace externo

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>, preformateado <pre>, lista, etc), pero si puede insertarse dentro de una tabla, de un bloque de cita <blockquote> o de una división <div>.

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:

<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>
div {
  border: black 3px solid;
  margin: 10px;
  padding: 10px;
}

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

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).

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.

<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>
div {
  background-color: lightblue;
}
Enlace externo
<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>
p {
  background-color: lightblue;
}
Enlace externo