Elementos y técnicas de diseño HTML

Los sitios web a menudo muestran contenido en varias columnas (como una revista o un periódico).

Elementos de diseño HTML

HTML tiene varios elementos semánticos que definen las diferentes partes de una página web:

<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element

<header>- Define un encabezado para un documento o una sección <nav>- Define un conjunto de enlaces de navegación <section>- Define una sección en un documento <article> - Define un contenido independiente y autónomo <aside> - Define el contenido aparte del contenido (como una barra lateral) <footer> - Define un pie de página para un documento o una sección <details> - Define detalles adicionales que el usuario puede abrir y cerrar a pedido <summary>- Define un encabezado para el <details>elemento Puede leer más sobre los elementos semánticos en nuestro capítulo Semántica HTML .

Técnicas de diseño HTML

Hay cuatro técnicas diferentes para crear diseños de varias columnas. Cada técnica tiene sus pros y sus contras:

• Marco CSS
• Propiedad flotante de CSS
• Caja flexible de CSS
• cuadrícula CSS

Marcos CSS

Si desea crear su diseño rápidamente, puede usar un marco CSS, como W3.CSS o Bootstrap .

Diseño flotante CSS

Es común hacer diseños web completos usando la floatpropiedad CSS. Float es fácil de aprender: solo necesita recordar cómo funcionan las propiedades floaty clear. Desventajas: los elementos flotantes están vinculados al flujo de documentos, lo que puede dañar la flexibilidad. Obtenga más información sobre float en nuestro capítulo CSS Float and Clear .

Diseño de caja flexible CSS

El uso de flexbox garantiza que los elementos se comporten de manera predecible cuando el diseño de la página debe adaptarse a diferentes tamaños de pantalla y diferentes dispositivos de visualización.

Obtenga más información sobre flexbox en nuestro capítulo CSS Flexbox .

Diseño de cuadrícula CSS

El módulo de diseño de cuadrícula de CSS ofrece un sistema de diseño basado en cuadrículas, con filas y columnas, lo que facilita el diseño de páginas web sin tener que usar flotadores y posiciones.

Obtenga más información sobre las cuadrículas CSS en nuestro capítulo Introducción a la cuadrícula CSS.