Maquetación Web en el presente

La Web, como todo lo relacionado con el mundo de la tecnología, avanza con el paso del tiempo y si no nos mantenemos al día resulta muy sencillo quedarse, como dicen los ingleses, deprecated. En otra ocasión, María nos habló acerca de cómo diseñar correctamente los contenidos de una página web. Esta vez, nos centraremos en otro de los aspectos que más ha evolucionado en los últimos tiempos, la manera de maquetar las páginas web.

En sus inicios, la evolución de los diseños de las páginas web hacia aspectos más vistosos motivó el uso incorrecto de componentes HTML <table></table> para realizar maquetaciones. Esto ha supuesto (podemos decir que todavía lo está haciendo) que haya hecho falta bastante tiempo para lograr que los nuevos diseños dejen de maquetarse así en favor de las recomendaciones del W3C.

Estas recomendaciones se centran en separar el contenido (xHTML) de la presentación (CSS) y utilizar cada componente para lo que fue diseñado, es decir, tablas fuera. Además, maquetar de esta manera aporta otra ventaja añadida: se simplifica su adaptación a los nuevos dispositivos (tablets, smarthones, etc), obteniendo así un producto, simplemente, más accesible.

Dicho esto, vamos a intentar entrar al detalle de cómo llevar a cabo una maquetación utilizando <div></div> de manera sencilla y sin tener unos conocimientos extraordinarios de CSS.