I siti Web spesso mostrano il contenuto in più colonne (come una rivista o un giornale).
Esempio
Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
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 .
Mai sentito parlare di W3Schools Spaces ? Qui puoi creare il tuo sito Web da zero o utilizzare un modello e ospitarlo gratuitamente.
È 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 .
Esempio
Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
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 .
Esempio
Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
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.