Layout di una pagina web

Una pagina web è divisa solitamente in varie sezioni, per organizzare meglio la pagina e per aiutare il browser a capire come visualizzarla.

Gli elementi di layout

Ci sono diversi tag che servono per dividere la pagina web nelle varie sezioni. Vediamo i più importanti.

I tag più usati

• <header> per l’intestazione della pagina;
• <nav> per il menu e i link per navigare nel sito;
• <article> per un contenuto indipendente, come un post di un blog;
• <section> per la sezione di un contenuto;
• <aside> per un contenuto correlato alla pagina;
• <footer> per il contenuto finale della pagina.

Lo schema di seguito rappresenta le varie sezioni di una pagina web standard.

<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

Il linguaggio CSS è sicuramente molto importante quando si crea il layout di un sito web. Infatti, gli elementi di layout che hai imparato in questa lezione non daranno alcuno stile alla pagina, ma verranno visualizzati uno sotto l'altro. Per sistemarli nella pagina, bisogna utilizzare CSS. Puoi impararlo su Biadets.