Template di layout HTML

Il layout di pagina è il modo in cui le principali aree di una pagina — il banner, la navigazione, il contenuto principale, la barra laterale e il piè di pagina — vengono disposte sullo schermo. Questo capitolo mostra come costruire un layout nel modo moderno: contrassegnare le aree con gli elementi semantici HTML5, quindi posizionarle con CSS Flexbox o CSS Grid. Al termine sarai in grado di assemblare da zero una pagina multi-colonna responsive.

La struttura di una pagina tipica

Quasi ogni sito web è costruito dagli stessi cinque elementi fondamentali:

Area	Scopo	Elemento
Header	Logo, titolo del sito, banner	`<header>`
Navigazione	Menu principale / link	`<nav>`
Contenuto principale	Il contenuto unico della pagina	`<main>`
Barra laterale	Link correlati, annunci, "contenuto extra"	`<aside>`
Piè di pagina	Copyright, contatti, link secondari	`<footer>`

Prima di HTML5 queste aree venivano tutte scritte come elementi generici <div> con attributi id o class come <div id="header">. Questo funziona ancora perfettamente, ma non porta alcun significato: un browser, uno screen reader o un motore di ricerca non può distinguere un banner da un piè di pagina. Gli elementi semantici sopra elencati descrivono cosa è ciascuna area, migliorando l'accessibilità e la SEO senza costi aggiuntivi. Consulta l'elenco completo in Elementi semantici in HTML5.

Lo scheletro semantico di una pagina

Inizia con il markup, prima di aggiungere qualsiasi CSS di layout. Usa ogni elemento landmark una sola volta, dove si trova naturalmente:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My page</title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
      <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </nav>
    </header>

    <main>
      <h2>Welcome</h2>
      <p>This is the primary content of the page.</p>
    </main>

    <aside>
      <h2>Related</h2>
      <p>Links, ads, or extra information go here.</p>
    </aside>

    <footer>
      <p>&copy; 2024 My Website</p>
    </footer>
  </body>
</html>

Alcune regole da tenere a mente:

Dovrebbe esserci solo un <main> per pagina, e non deve essere annidato dentro <header>, <nav>, <aside> o <footer>.
<nav> è per i blocchi di navigazione principali, non per ogni gruppo di link.
<aside> è contenuto tangenziale rispetto al contenuto principale — funziona sia se lo si posiziona dentro <main> sia accanto ad esso.

Questo scheletro non ha ancora colonne; tutto si impila verticalmente. Il layout — trasformare questi blocchi in colonne — è un compito per CSS, che aggiungiamo di seguito.

Un layout a due colonne con Flexbox

CSS Flexbox dispone gli elementi lungo un singolo asse — una riga o una colonna — ed è ideale per una disposizione contenuto-più-barra-laterale. Avvolgi <main> e <aside> in un contenitore flex; display: flex li mette fianco a fianco, e flex controlla come viene ripartito lo spazio disponibile.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Flexbox two-column layout</title>
    <style>
      body {
        margin: 0;
        font-family: Arial, sans-serif;
      }
      header, footer {
        background: #2c3e50;
        color: #fff;
        padding: 16px;
      }
      .container {
        display: flex;
        gap: 16px;
        padding: 16px;
      }
      main {
        flex: 3;            /* main takes 3 shares of the space */
        background: #ecf0f1;
        padding: 16px;
      }
      aside {
        flex: 1;            /* sidebar takes 1 share */
        background: #dfe6e9;
        padding: 16px;
      }
    </style>
  </head>
  <body>
    <header><h1>My Website</h1></header>
    <div class="container">
      <main>
        <h2>Main content</h2>
        <p>This column grows to fill most of the width.</p>
      </main>
      <aside>
        <h2>Sidebar</h2>
        <p>A narrower second column.</p>
      </aside>
    </div>
    <footer><p>&copy; 2024 My Website</p></footer>
  </body>
</html>

flex: 3 e flex: 1 fanno sì che le due colonne si dividano la larghezza disponibile in rapporto 3 a 1. Poiché si tratta di proporzioni, le colonne rimangono fluide: si restringono e si espandono con il viewport invece di rimanere a un numero fisso di pixel. Per impilare le colonne su schermi piccoli, inserisci la regola in una media query:

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Un layout completo con CSS Grid

CSS Grid dispone gli elementi in due dimensioni — righe e colonne allo stesso tempo — il che lo rende lo strumento migliore per un layout di intera pagina. Con grid-template-areas puoi disegnare il layout in testo semplice e assegnare ogni elemento a un'area denominata:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>CSS Grid page layout</title>
    <style>
      body {
        margin: 0;
        font-family: Arial, sans-serif;
      }
      .grid {
        display: grid;
        grid-template-columns: 1fr 3fr;   /* sidebar : content */
        grid-template-areas:
          "header header"
          "nav    main"
          "footer footer";
        gap: 12px;
        padding: 12px;
      }
      header { grid-area: header; background: #2c3e50; color: #fff; }
      nav    { grid-area: nav;    background: #dfe6e9; }
      main   { grid-area: main;   background: #ecf0f1; }
      footer { grid-area: footer; background: #2c3e50; color: #fff; }
      header, nav, main, footer { padding: 16px; }
    </style>
  </head>
  <body>
    <div class="grid">
      <header><h1>My Website</h1></header>
      <nav>Navigation</nav>
      <main>
        <h2>Main content</h2>
        <p>The header and footer span both columns.</p>
      </main>
      <footer><p>&copy; 2024 My Website</p></footer>
    </div>
  </body>
</html>

L'unità fr significa "una frazione dello spazio libero", quindi 1fr 3fr rende la colonna del contenuto tre volte più larga della barra laterale — ancora una volta, un rapporto fluido anziché una larghezza fissa. La mappa visiva in grid-template-areas consente all'header e al footer di estendersi su entrambe le colonne semplicemente ripetendo i loro nomi in una riga.

Flexbox o Grid — quale usare?

Entrambi sono moderni, ampiamente supportati e spesso intercambiabili, ma hanno una naturale divisione del lavoro:

Scegli Flexbox quando stai disponendo elementi in una sola direzione — una barra di navigazione, una toolbar, una riga di card, o una divisione contenuto-più-barra-laterale.
Scegli Grid quando hai bisogno di righe e colonne insieme, come per un layout di intera pagina (header / barra laterale / contenuto / footer) o una galleria immagini.

Un pattern comune e robusto consiste nell'usare Grid per lo scheletro generale della pagina e Flexbox per i componenti più piccoli all'interno di ciascuna area.

Layout a larghezza fissa vs. layout fluidi

Gli esempi sopra sono fluidi (detti anche liquid): le larghezze sono espresse come rapporti (flex: 3, 3fr) o percentuali, quindi il layout si adatta a qualsiasi schermo. Questa è la base del design responsive.

Un layout a larghezza fissa vincola le aree a un valore esatto in pixel, ad esempio width: 960px o flex: 0 0 240px per una barra laterale. Le larghezze fisse offrono un controllo preciso ma non si adattano — su uno smartphone stretto causano scorrimento orizzontale, e su un monitor largo lasciano spazio vuoto. In pratica la maggior parte dei siti combina i due approcci: una barra laterale a larghezza fissa accanto a una colonna di contenuto fluida, spesso limitata con max-width affinché gli schermi molto larghi rimangano leggibili.

Informazione

Il vecchio approccio ai layout multi-colonna usava la proprietà CSS float insieme a valori negativi di margin. Questa tecnica è ormai legacy — è fragile e difficile da mantenere. Usa Flexbox o Grid per il layout; float oggi serve principalmente per far scorrere il testo attorno a un'immagine.

Template di layout pronti all'uso

Se preferisci partire da una struttura già pronta, la galleria seguente offre layout HTML scaricabili — fissi, fluidi e ibridi, con due o tre colonne. Sono un utile riferimento, ma le tecniche moderne mostrate sopra sono il metodo consigliato per costruire nuove pagine.

Questi template sono stati costruiti con la tecnica legacy CSS float e margin negativi. Puoi studiarli per prendere spunto, ma ricostruisci la struttura con gli approcci Flexbox o Grid descritti sopra per un risultato più facile da mantenere e responsive fin da subito.

Personalizzare un template

Una volta trovata una struttura di tuo gradimento, ecco i modi più comuni per renderla tua:

Sostituisci il testo segnaposto e aggiungi le tue immagini.
Adatta il markup semantico al tuo contenuto.
Approfondisci il markup con il nostro tutorial HTML.
Ridisegna il layout con il nostro tutorial CSS.
Aggiungi interattività con il nostro tutorial JavaScript.

Esercitati

Pratica

Quali elementi semantici HTML5 vengono comunemente usati per strutturare il layout di una pagina?

Pratica

Quale tecnica CSS è più adatta per un layout di pagina bidimensionale completo con righe e colonne?

CSS GridCSS float con margini negativiTabelle HTMLIl tag <center>