# Divisiones: la etiqueta <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: 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 yo diría 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 decirse si hay divisiones o no, mientras que en el segundo sí.

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

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 es necesario utilizar selectores de tipo o selectores de descendientes, como en el ejemplo siguiente:

| div { border: black 3px solid; margin: 10px; padding: 10px; } div 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 o un bloque de cita <blockquote>.

Volver al índice

## Crear una división

Para crear una división, hay que:

- seleccionar con el ratón los elementos que vayan a formar de la división,
- pulsar la tecla `F2`, y
- elegir la opción de menú XHTML > División (div) (o bien utilizar el atajo de teclado Ctrl+h+v o pulsar el botón de División ( ) de la ventana de Herramientas.

Volver al índice

## Borrar una división

Para borrar una división, hay que:

- seleccionar la división con la tecla `F2`,
- elegir el menú Editar > Transformar... y
- en la ventana de transformaciones elegir la opción "Eliminar división".

Un error que se suele cometer al asignar un atributo a una división (por ejemplo, al asignar una clase) en Amaya es el siguiente: en vez de situar el cursor en un párrafo incluido en una división y pulsar un par de veces `F2` para seleccionar la división, el usuario selecciona con el ratón todos los párrafos incluidos en la división y pulsa solamente una vez `F2`. Al asignar la clase, en vez de asignarla a la división, la clase se asigna a todos y cada uno de los párrafos seleccionados. Para evitar este error, es conveniente fijarse en la línea de estado, que indica el elemento seleccionado (en el ejemplo anterior, <p> o <div>). Otro detalle en el que poder fijarse es que al seleccionar los párrafos, el espacio intermedio entre párrafos no cambia de color, mientras que al seleccionar la división sí que lo hace.

Volver al índice