Struttura Semantica

Una pagina Web non è composta soltanto da testo, immagini e collegamenti. I contenuti sono normalmente organizzati in aree con funzioni differenti.

Una pagina può avere, per esempio:

• un’intestazione;
• un menu di navigazione;
• un contenuto principale;
• diverse sezioni;
• contenuti secondari;
• un piè di pagina.

HTML mette a disposizione elementi che permettono di descrivere direttamente il significato di queste parti.

Questo approccio prende il nome di HTML semantico.

Consideriamo una pagina organizzata esclusivamente mediante contenitori generici:

<div>
    Titolo del sito
</div>

<div>
    Menu di navigazione
</div>

<div>
    Contenuto principale
</div>

<div>
    Informazioni finali
</div>

Il browser può visualizzare questi elementi, ma osservando il codice non è immediatamente evidente quale funzione abbia ogni contenitore.

Con gli elementi semantici possiamo invece scrivere:

<header>
    Titolo del sito
</header>

<nav>
    Menu di navigazione
</nav>

<main>
    Contenuto principale
</main>

<footer>
    Informazioni finali
</footer>

Una possibile struttura logica di una pagina Web può essere rappresentata nel seguente modo:

+------------------------------------------+
|                 HEADER                   |
|        intestazione della pagina         |
+------------------------------------------+
|                  NAV                     |
|          menu di navigazione             |
+------------------------------------------+
|                                          |
|                  MAIN                    |
|                                          |
|   +-------------------------------+      |
|   |            SECTION            |      |
|   |                               |      |
|   |    +---------------------+    |      |
|   |    |       ARTICLE       |    |      |
|   |    +---------------------+    |      |
|   |                               |      |
|   +-------------------------------+      |
|                                          |
|   +-------------------------------+      |
|   |             ASIDE             |      |
|   |      contenuto secondario     |      |
|   +-------------------------------+      |
|                                          |
+------------------------------------------+
|                 FOOTER                   |
|        informazioni finali               |
+------------------------------------------+

L’elemento <header> rappresenta un’area introduttiva o di intestazione.

Può contenere, per esempio:

• il titolo del sito;
• un logo;
• un sottotitolo;
• informazioni introduttive.

Esempio:

<header>
    <h1>Portale di Informatica</h1>
    <p>Materiali e approfondimenti sulle tecnologie Web</p>
</header>

L’elemento <nav> identifica una sezione della pagina dedicata principalmente alla navigazione.

Normalmente contiene collegamenti verso altre pagine oppure verso sezioni importanti del sito.

<nav>
    <a href="index.html">Home</a>
    <a href="corsi.html">Corsi</a>
    <a href="contatti.html">Contatti</a>
</nav>

Il tag <nav> non crea automaticamente un menu grafico. Descrive il significato dell’area.

L’elemento <main> rappresenta il contenuto principale del documento.

Al suo interno viene inserito il contenuto centrale e specifico della pagina.

<main>

    <h2>Introduzione ad HTML</h2>

    <p>
        HTML è il linguaggio utilizzato per descrivere
        la struttura dei contenuti di una pagina Web.
    </p>

</main>

L’elemento <section> rappresenta una sezione tematica del documento.

È utile quando una parte della pagina raccoglie contenuti relativi allo stesso argomento.

<section>

    <h2>HTML</h2>

    <p>
        HTML definisce la struttura di una pagina Web.
    </p>

</section>

Una pagina può contenere più sezioni:

<main>

    <section>
        <h2>HTML</h2>
        <p>HTML descrive la struttura dei contenuti.</p>
    </section>

    <section>
        <h2>CSS</h2>
        <p>CSS definisce la presentazione dei contenuti.</p>
    </section>

</main>

L’elemento <article> rappresenta un contenuto che possiede un significato autonomo e che potrebbe essere comprensibile anche separatamente dal resto della pagina.

Esempi tipici possono essere:

• un articolo di un blog;
• una notizia;
• una recensione;
• un post;
• una scheda informativa autonoma.

Esempio:

<article>

    <h2>Che cos’è HTML?</h2>

    <p>
        HTML è un linguaggio di markup utilizzato
        per strutturare i contenuti delle pagine Web.
    </p>

</article>

<section> e <article> possono sembrare simili, ma esprimono concetti differenti.

I due elementi possono anche essere utilizzati insieme.

<section>

    <h2>Ultime notizie</h2>

    <article>
        <h3>Nuova versione di un software</h3>
        <p>Contenuto della prima notizia...</p>
    </article>

    <article>
        <h3>Nuove tecnologie Web</h3>
        <p>Contenuto della seconda notizia...</p>
    </article>

</section>

L’elemento <aside> rappresenta un contenuto collegato al contenuto principale, ma non essenziale per comprenderlo.

Può essere utilizzato, per esempio, per:

• approfondimenti;
• informazioni aggiuntive;
• contenuti correlati;
• note laterali.

<aside>

    <h2>Approfondimento</h2>

    <p>
        HTML è stato sviluppato nei primi anni del World Wide Web.
    </p>

</aside>

L’elemento <footer> rappresenta il piè di pagina di un documento o di una sua parte.

Può contenere informazioni come:

• autore;
• copyright;
• contatti;
• informazioni sul documento;
• collegamenti secondari.

Esempio:

<footer>
    <p>Sito didattico di Informatica</p>
    <p>Contatti: info@example.com</p>
</footer>

L’elemento <div> è un contenitore generico e non comunica uno specifico significato sul contenuto che racchiude.

<div>
    <h2>HTML</h2>
    <p>HTML è un linguaggio di markup.</p>
</div>

Se il contenuto rappresenta chiaramente una sezione tematica, possiamo utilizzare:

<section>
    <h2>HTML</h2>
    <p>HTML è un linguaggio di markup.</p>
</section>

Gli elementi semantici descrivono la funzione del contenuto, non il suo aspetto grafico.

Per esempio:

<header>
    <h1>Il mio sito</h1>
</header>

indica che il contenuto rappresenta un’intestazione.

Non stabilisce automaticamente:

• il colore dello sfondo;
• la dimensione dell’area;
• la posizione;
• il colore del testo;
• la presenza di bordi.

Utilizzare elementi semantici offre diversi vantaggi.

Osserviamo una semplice pagina dedicata alle tecnologie Web:

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <title>Tecnologie Web</title>
</head>

<body>

    <header>
        <h1>Tecnologie Web</h1>
        <p>Introduzione allo sviluppo Web</p>
    </header>

    <nav>
        <a href="index.html">Home</a>
        <a href="html.html">HTML</a>
        <a href="css.html">CSS</a>
    </nav>

    <main>

        <section>

            <h2>Linguaggi per il Web</h2>

            <article>
                <h3>HTML</h3>
                <p>
                    HTML descrive la struttura dei contenuti
                    di una pagina Web.
                </p>
            </article>

            <article>
                <h3>CSS</h3>
                <p>
                    CSS definisce la presentazione grafica
                    dei contenuti.
                </p>
            </article>

        </section>

        <aside>
            <h2>Approfondimento</h2>
            <p>
                HTML e CSS svolgono funzioni differenti
                ma vengono utilizzati insieme.
            </p>
        </aside>

    </main>

    <footer>
        <p>Materiale didattico di Informatica</p>
    </footer>

</body>

</html>

La struttura del documento precedente può essere rappresentata come un albero:

body
|
+-- header
|
+-- nav
|
+-- main
|   |
|   +-- section
|   |   |
|   |   +-- article
|   |   |
|   |   +-- article
|   |
|   +-- aside
|
+-- footer

Questa rappresentazione mostra che gli elementi HTML possono essere annidati.

Per esempio, gli elementi <article> sono contenuti nella <section>, mentre section e aside sono contenuti in <main>.

informatica.html

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <title>Portale Informatica</title>
</head>

<body>



</body>

</html>

<header>

    <h1>Portale Informatica</h1>

    <p>
        Risorse dedicate alle tecnologie informatiche.
    </p>

</header>

<nav>
    <a href="index.html">Home</a>
    <a href="html.html">HTML</a>
    <a href="css.html">CSS</a>
</nav>

<main>

    <h2>Sviluppo Web</h2>

    <p>
        Lo sviluppo Web utilizza diverse tecnologie
        per realizzare siti e applicazioni.
    </p>

</main>

<main>

    <section>

        <h2>Tecnologie principali</h2>

        <p>
            HTML e CSS sono due tecnologie fondamentali
            per la realizzazione delle pagine Web.
        </p>

    </section>

</main>

<article>

    <h3>HTML</h3>

    <p>
        HTML permette di definire la struttura
        dei contenuti di una pagina.
    </p>

</article>

<article>

    <h3>CSS</h3>

    <p>
        CSS permette di definire la presentazione
        grafica della pagina.
    </p>

</article>

<aside>

    <h2>Approfondimento</h2>

    <p>
        JavaScript permette di aggiungere comportamento
        e interattività alle pagine Web.
    </p>

</aside>

<footer>

    <p>
        Portale didattico di Informatica
    </p>

</footer>

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <title>Portale Informatica</title>
</head>

<body>

    <header>

        <h1>Portale Informatica</h1>

        <p>
            Risorse dedicate alle tecnologie informatiche.
        </p>

    </header>


    <nav>
        <a href="index.html">Home</a>
        <a href="html.html">HTML</a>
        <a href="css.html">CSS</a>
    </nav>


    <main>

        <section>

            <h2>Tecnologie principali</h2>

            <p>
                HTML e CSS sono due tecnologie fondamentali
                per la realizzazione delle pagine Web.
            </p>


            <article>

                <h3>HTML</h3>

                <p>
                    HTML permette di definire la struttura
                    dei contenuti di una pagina.
                </p>

            </article>


            <article>

                <h3>CSS</h3>

                <p>
                    CSS permette di definire la presentazione
                    grafica della pagina.
                </p>

            </article>

        </section>


        <aside>

            <h2>Approfondimento</h2>

            <p>
                JavaScript permette di aggiungere comportamento
                e interattività alle pagine Web.
            </p>

        </aside>

    </main>


    <footer>

        <p>
            Portale didattico di Informatica
        </p>

    </footer>

</body>

</html>

Errore 1 - Confondere head e header

Errato concettualmente:

<head>
    <h1>Il mio sito</h1>
</head>

Il titolo visibile della pagina deve essere inserito nel body, eventualmente all’interno di header:

<body>

    <header>
        <h1>Il mio sito</h1>
    </header>

</body>

Errore 2 - Utilizzare nav per qualsiasi gruppo di link

<nav> è destinato principalmente ai blocchi di navigazione significativi della pagina. Non è necessario racchiudere ogni singolo collegamento in un elemento nav.

Errore 3 - Utilizzare section come semplice contenitore grafico

Una section dovrebbe rappresentare una parte tematica del documento, non essere utilizzata soltanto perché si desidera creare un riquadro o applicare uno stile.

Errore 4 - Pensare che aside significhi destra

Il tag aside indica un contenuto secondario o correlato. Non indica una posizione grafica.

Errore 5 - Utilizzare sempre div

Questo codice:

<div>
    <h1>Il mio sito</h1>
</div>

<div>
    <a href="index.html">Home</a>
    <a href="contatti.html">Contatti</a>
</div>

può essere reso semanticamente più significativo:

<header>
    <h1>Il mio sito</h1>
</header>

<nav>
    <a href="index.html">Home</a>
    <a href="contatti.html">Contatti</a>
</nav>

Realizzare una pagina denominata tecnologie.html dedicata alle tecnologie informatiche.

La pagina deve contenere:

• un header con titolo h1 e breve descrizione;
• un nav con almeno tre collegamenti;
• un main;
• almeno due section dedicate ad argomenti differenti;
• almeno due article;
• un aside contenente un approfondimento;
• un footer con informazioni conclusive.

Utilizzare inoltre alcuni degli elementi HTML già studiati:

• titoli;
• paragrafi;
• liste;
• collegamenti;
• almeno un’immagine.

Indicare quale elemento semantico utilizzeresti nelle seguenti situazioni: