Las 5 Formas de Crear LAYOUTS en HTML

Layouts

El layout es como se va a visualizar o distribuir el contenido de una web.

See the Pen HTML | 1.28 - Layouts - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Elementos HTML para Layouts

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>

Métodos de Layouts

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

Tablas HTML

El elemento <table> no se creó para utilizarlo para crear layouts. Así que no deberíamos de usar este método.

CSS Frameworks

Es la forma más rápida de crear un layout, usar algún frameworks como lo es Bootstrap.

CSS Floats

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.

CSS Flexbox

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

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.

¿Quieres más?

Si estás interesado en el mundo de la programación y el desarrollo web, te recomiendo que te suscribas a mi canal de youtube donde tienes mucho más contenido gratuito

IR AL CANAL

¿Quieres convertirte en desarrollador web? [GRATIS]

Déjame aquí tu mejor email y te mandaré un curso para que puedas empezar en el desarrollo web totalmente GRATIS!

¡Prometo no enviarte SPAM! Sólo cosas relevantes que te interesen.