El layout es como se va a visualizar o distribuir el contenido de una web.
HTML nos ofrece varias etiquetas semánticas que definen diferentes partes de una web:
<header>Define el encabezado del documento o de una sección<nav>Define un contenedor para enlaces de navegación<section>Define una sección del documento<article>Define un artículo<aside>Define contenido al lado del contenido<footer>Define el pie de página del documento<details>Define detalles adicionales<summary>Define un encabezado para el<details>
Hay cinco maneras de crear un sistema de layout, cada una tiene sus ventajas y desventajas:
- Tablas HTML (no recomendado)
- CSS float
- CSS flexbox
- CSS framework
- CSS grid
El elemento <table> no se creó para utilizarlo para crear layouts. Así que no deberíamos de usar este método.
Es la forma más rápida de crear un layout, usar algún frameworks como lo es Bootstrap.
Es una forma muy común de maquetar toda la web usando la propiedad de CSS float. Es fácil de aprender, pero en algunos casos puede que no sea todo lo flexible que necesitamos.
Flexbox CSS es un nuevo sistema de layout desde CSS3. Se va ajustando a las diferentes resoluciones de pantalla. Pero no funciona con IE10.
CSS Grid Layout nos ofrece un layout basado en una rejilla con columnas y filas. Es fácil posicionar los elementos. Pero no funciona en IE y en Edge 15 o inferiores.
