Struttura di una pagina web

Una struttura cardine delle pagine web prevede la suddivisione del body della pagina in sezioni, in modo da facilitare la navigazione all'interno del sito. Le 6 sezioni principali sono:

wrapper: div contenente tutto il corpo della pagina. È posto direttamente dentro a body e conterrà tutte le altre sezioni;
header: intestazione della pagina che solitamente contiene il titolo di ciò che la pagina rappresenta e il logo;
container: div che costituisce il blocco principale della pagina. Contiene il nav il main;
nav: menù di navigazione, per raggiungere rapidamente le pagine che costituiscono il sito. Solitamente è posto sotto l'header orizzontalmente o sulla sinistra verticalmente;
main: corpo della pagina dove è scritto il testo e sono inseriti titoli, immagini e altri elementi;
footer: piè di pagina, solitamente contiene contatti o informazioni riguardanti i proprietari del sito e può contenere anche link ad altre parti del sito;

I tag che utilizziamo per generare questa suddivisione sono:

wrapper: div con id wrapper <div id="wrapper">
header: tag <header>
container: div con id container <div id="container">
nav: tag <nav>
main: tag <main>
footer: tag <footer>

Arrivando a creare la seguente struttura:

<body>
    <div id="wrapper">
        <header>

        </header>
        <div id="container">
            <nav>

            </nav>
            <main>

            </main>
        </div>
        <footer>

        </footer>
    </div>
</body>

La struttura con flexbox

Grazie al CSS, e in particolare i flexbox, possiamo disporre gli elementi come vogliamo. Un tipico modello di pagina web prevede la disposizione del m enù di navigazione sulla sinista, come in questo caso:

div id="wrapper"

header

div id="container"

main

Stle in css:

div con id wrapper

È il più esterno. Per ottenere la disposizione di header, container e footer uno sotto l'altro, useremo flow-direction: column. Per far sì che questa proprietà abbia effetto dobbiamo innanzitutto impostare la proprietà display:flex.

#wrapper {
    display: flex;
    flow-direction: column;
}

div con id container

È il div interno che contiene sia nav che main. Considerando che devono stare uno a fianco dell'altro, imposteremo flow-direction: row. Nel caso volessimo un risultato diverso, potremmo impostarla a colum. Per far sì che questa proprietà abbia effetto dobbiamo innanzitutto impostare la proprietà display:flex.

#container {
    display: flex;
    flow-direction: row;
}