Las 5 Formas de Crear LAYOUTS en HTML

Logo de Cuarzo.dev
Cuarzo.dev

Recibe cada lunes y jueves un correo para ayudarte a impulsar tus habilidades de programación. Ofreciéndote consejos, tutoriales, recursos gratuitos, noticias relevantes y una comunidad comprometida. También tenemos memes 😏

Suscríbete Gratis

Si tienes alguna duda con el curso o te quedas en algún punto donde no sepas avanzar te puedes unir gratis a nuestra comunidad de discord y preguntar tus dudas, que la comunidad estará encantada de ayudarte.

Únete al discord

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

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

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.

Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.

Libro No todo es programar de Kiko Palomares
Koding Beats