Los elementos de la estructura en HTML 4

Los elementos de la estructura en  HTML 4

1. Las cajas <div>

En HTML 4, el elemento principal para estructurar las páginas web es la famosa "caja <div>". Con el elemento <div> es posible crear zonas de visualización de forma rectangular. Cada una de esas zonas, de esas cajas <div>, puede ser identificada de manera exclusiva, mediante un código de identificación, y de ese modo podemos aplicarle un formato con CSS. Ese código de identificación único se establece con el atributo id.

Ejemplo:

<div id="bannerSuperior">

...

</div>

También podemos usar las clases, cuando este formato se repita en la página y no se trate, por lo tanto, de un formato único.

Ejemplo:

<div class="comentarios">

...

</div>

A continuación, una vez que haya determinado la estructura, podrá aplicar el diseño con las hojas de estilo CSS, mediante los selectores de identificación que correspondan al código de identificación o a la clase en cuestión.

Ejemplo:

#bannerSuperior {

...

}

.comentarios{

...

}

En el siguiente ejemplo podemos ver la estructura de una página de tipo blog con cajas <div>:

2. La "divitis"

Con HTML 4 y CSS 2.1, la estructura de las páginas, cuando esta es relativamente compleja, puede requerir una gran cantidad de cajas <div>. Podemos llegar a crear páginas que contengan decenas y decenas de <div>. Si usted cae en ese exceso, habrá contraído la enfermedad llamada "divitis", es decir, el uso excesivo de cajas <div>.

3. Un contenido no semántico

Todas esas cajas <div> presentan otro problema: el de la semántica de los contenedores. Cada caja <div> se distingue de las demás gracias a su código de identificación único, que el diseñador web le habrá asignado en función de su "humor" o de sus "ganas" en ese momento.

Por ese motivo, las cajas <div> no son semánticas: el contenido esperado no está definido por ningún parámetro. Una caja <div> identificada con id="izquierda" no nos aporta ningún dato sobre su contenido. Podría tratarse de una barra de navegación, de información legal o de cualquier otro tipo de contenido.

Ahora bien, la evolución del HTML se dirige hacia un mayor uso de la semántica.