Elemento

El elemento <div> es un elemento en bloque "genérico" que se utiliza para estructurar la página web. Funciona como un contenedor, para tener todo mejor organizado.

Antes, las páginas web solían estructurarse mediante tablas (etiqueta <table>), pero con este nuevo elemento surgen más posibilidades en cuanto a diseño y esquemas.

Un elemento div es transparente por defecto. Para que tenga un color, debemos modificar su propiedad background-color.

No basta con esto, también debemos darle unas medidas (alto y ancho), si no, al no contener nada, no tendrá ninguna superficie habilitada.

Veamos un ejemplo:

Creamos un contenedor div en nuestro código HTML así:

<div id="midiv"></div>

Nota: he cambiado el color de fondo de nuestra web para comprobar mejor la transparencia del elemento.

Como vemos, el elemento necesita rellenarse con algo, si no tiene unas medidas o nada que lo contenga, el contenedor no necesita ser mostrado y por eso es como si no existiera.

Sólo vemos el borde, pero nada dentro. Llega hasta el final de la línea por ser un elemento en bloque.

Si introducimos un texto, se verá igual que un párrafo. Vamos a darle medidas y comprobaremos que el fondo es transparente, hasta que le demos nosotros un color.

Le damos las siguientes propiedades en nuestra regla:

width: 150px;

height: 150px;

El resultado:

Como dije al principio de esta lección, los elementos div se utilizan principalmente para estructurar las páginas webs.

Al final del curso veremos más detalladamente las formas que se suelen utilizar para estructurar un página web con elementos div.