Maquetación HTML

Los sitios web suelen mostrar contenido en múltiples columnas (como una revista o periódico).

HTML5 ofrece nuevos elementos semánticos que definen las diferentes partes de la página web:

Elementos Semanticos

  • <header> - Define un encabezado para un documento o sección.
  • <nav> - Define un contenedor para un navegador de ligas.
  • <section> - Define una sección del documento.
  • <article> - Define un contenedor de artículo independiente.
  • <aside> - Define contenido aparte del contenido (como una barra lateral).
  • <footer> - Define un pie de página o pie de sección.
  • <details> - Define detalles adicionales.
  • <summary> - Define un encabezado para el elemento <details>.

Técnicas para plantillas HTML

Hay cuatro diferentes formas de crear plantillas multi-columnas. Cada una tiene de ellas tiene sus pros y contras.

  • Tablas HTML
  • Propiedades flotantes CSS
  • Frameworks CSS
  • Flexbos CSS

¿Cuál elegir?

Tablas HTML

Los elementos <table> no fueron diseñados como herramientas de plantillas. El propósito de estos elementos es mostrar datos tabulados. Por lo tanto, no es recomendado diseñar la página con estos elementos, dado que esto produce código desastroso sobre todo para dar el mantenimiento en futuras ocasiones.

Tip: No use elementos <table> para diseñar sus sitios web.

Frameworks CSS

Si deseas crear tus plantillas de una manera más rápida, puedes apoyarte utilizando algún framework CSS como bootstrap por nombrar el más popular.

CSS Flotante

Es muy común diseñar sitios enteros con plantillas utilizando propiedades de CSS flotante. Esto es fácil aprender, pero se requiere de entender y recordar como esta flotando cada elemento a través de sus propiedades y como limpiarlas.

Desventajas: Los elementos flotantes están atados al flujo del documento y esto puedo perjudicar a la flexibilidad.

Flexbox CSS

Este es una nueva forma de diseñar plantillas en CSS.

El uso de Flexbox asegura que el comportamiento de los elementos sea predeciblemente cuando la plantilla toma diferentes tamaños de pantalla y en diferentes dispositivos.

Desventajas: No funciona en Internet Explorer 10 o anteriores.