viernes, 2 de mayo de 2014

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.


Espero haber ayudado en algo. Hasta la próxima oportunidad!




No hay comentarios:

Publicar un comentario en la entrada