• Cuarzo.dev
  • Posts
  • Las 5 Formas de Crear LAYOUTS en HTML

Las 5 Formas de Crear LAYOUTS en HTML

Aprende todas las maneras que existen de maquetar documentos de HTML. Desde la más recomendadas hasta las que no deberías usar.

Layouts

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

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.

Suscríbete para seguir leyendo...

Este contenido es gratuito, pero debes estar suscrito a Cuarzo.dev para continuar leyendo.

Already a subscriber?Sign In.Not now

Join the conversation

or to participate.