Layout di una pagina web

Una pagina web è generalmente suddivisa in diverse sezioni, ognuna con uno scopo preciso. Questa organizzazione rende il codice più ordinato, facilita la lettura da parte degli sviluppatori e aiuta il browser a interpretare correttamente la struttura del documento.

Gli elementi di layout

HTML mette a disposizione diversi tag dedicati alla struttura della pagina. Questi elementi, chiamati anche elementi semantici, descrivono il ruolo delle varie parti del sito senza modificarne l'aspetto grafico.

I tag più usati

• <header> definisce l'intestazione della pagina o di una sezione.
• <nav> contiene il menu e i collegamenti per navigare nel sito.
• <article> rappresenta un contenuto indipendente, come un articolo o un post di un blog.
• <section> identifica una sezione dedicata a uno specifico argomento.
• <aside> contiene contenuti correlati, come informazioni aggiuntive o una barra laterale.
• <footer> rappresenta la parte finale della pagina o di una sezione.

Lo schema seguente mostra come questi elementi vengono comunemente organizzati all'interno di una pagina web.

<header>
  <h1>Acquista i tuoi panini!</h1>
  <nav>
    <a href="pagina1.html">Dove acquistarli</a>
    <a href="pagina2.html">Prezzi</a>
    <a href="pagina3.html">Chi siamo</a>
  </nav>
</header>
<article>
  <h3>I nostri panini</h3>
  <section>
    Panini di carne:</br>
    <a href="primo.html">Hamburger 1</a><a href="secondo.html">Hamburger 2</a>
  </section>
  <section>
    Panini di pesce:</br>
    <a href="primo.html">Hamburger 1</a><a href="secondo.html">Hamburger 2</a>
  </section>
  <section>
    Panini di vegani:</br>
    <a href="primo.html">Hamburger 1</a><a href="secondo.html">Hamburger 2</a>
  </section>
</article>
<footer>
  Grazie per aver utilizzato il nostro servizio!
</footer>

Il linguaggio CSS

I tag di layout definiscono soltanto la struttura della pagina. Da soli non applicano colori, dimensioni, spaziature o posizionamenti particolari: nella maggior parte dei casi verranno visualizzati uno sotto l'altro.

Per creare un layout moderno, ad esempio affiancando elementi, impostando margini, colori o adattando la pagina ai dispositivi mobili, è necessario utilizzare il linguaggio CSS. Dopo aver compreso la struttura di una pagina HTML, il passo successivo è imparare a usare CSS per trasformarla in un sito completo e piacevole da vedere.