Elementi e tecniche di layout HTML

I siti Web spesso mostrano il contenuto in più colonne (come una rivista o un giornale).

Elementi di layout HTML

HTML ha diversi elementi semantici che definiscono le diverse parti di una pagina 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>- Definisce un'intestazione per un documento o una sezione <nav>- Definisce un insieme di collegamenti di navigazione <section>- Definisce una sezione in un documento <article>- Definisce un contenuto indipendente e autonomo <aside>- Definisce il contenuto oltre al contenuto (come una barra laterale) <footer>- Definisce un piè di pagina per un documento o una sezione <details>- Definisce dettagli aggiuntivi che l'utente può aprire e chiudere su richiesta <summary>- Definisce un'intestazione per l' <details>elemento Puoi leggere di più sugli elementi semantici nel nostro capitolo sulla semantica HTML .

Tecniche di layout HTML

Esistono quattro diverse tecniche per creare layout multicolonna. Ogni tecnica ha i suoi pro e contro:

• quadro CSS
• Proprietà float CSS
• cassetta flessibile CSS
• Griglia CSS

Framework CSS

Se vuoi creare il tuo layout velocemente, puoi usare un framework CSS, come W3.CSS o Bootstrap .

Disposizione mobile CSS

È comune eseguire interi layout Web utilizzando la floatproprietà CSS. Float è facile da imparare: devi solo ricordare come funzionano le proprietà floate clear. Svantaggi: gli elementi mobili sono legati al flusso del documento, il che potrebbe danneggiare la flessibilità. Scopri di più sul float nel nostro capitolo CSS Float and Clear .

Layout CSS Flexbox

L'uso di flexbox garantisce che gli elementi si comportino in modo prevedibile quando il layout della pagina deve adattarsi a schermi di dimensioni diverse e dispositivi di visualizzazione diversi.

Scopri di più su flexbox nel nostro capitolo CSS Flexbox .

Layout griglia CSS

Il CSS Grid Layout Module offre un sistema di layout basato su griglia, con righe e colonne, che semplifica la progettazione di pagine Web senza dover utilizzare float e posizionamento.

Scopri di più sulle griglie CSS nel nostro capitolo Introduzione alla griglia CSS .