Introduzione

Vuoi migliorare il posizionamento sui motori di ricerca e creare pagine web accessibili?

Questo articolo ti guida attraverso l’importanza dei tag semantici, come <header>, <section> e <article>, per organizzare i contenuti in modo logico e leggibile. Ottimizza la tua struttura HTML e rendi le tue pagine user-friendly e SEO-friendly!

La formattazione semantica in HTML consiste nell’uso di tag specifici per definire il ruolo e la funzione di diverse parti di una pagina web.

Usare tag semantici è importante per creare un codice leggibile, ben organizzato e accessibile, sia per i motori di ricerca che per gli utenti. I tag semantici aiutano a indicare chiaramente cosa rappresenta ciascuna sezione del contenuto, permettendo ai browser e agli screen reader di interpretarlo correttamente. Di seguito analizziamo i principali tag semantici e il loro utilizzo.

1. Header

Il tag <header> rappresenta l’intestazione di una pagina o di una sezione del contenuto. Di solito contiene elementi come il logo, il titolo della pagina, il menu di navigazione principale o altri elementi introduttivi.

Utilizzo: Usato per definire l’introduzione di una pagina web o di una sezione specifica, può apparire più volte se ci sono diverse sezioni (ad esempio un articolo o una pagina che include più sezioni). Esempio:

1
2
3
4
5
6
7
8
9
10
    <header>
        <h1>Benvenuti nel mio sito web</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">Chi Siamo</a></li>
                <li><a href="#contact">Contatti</a></li>
            </ul>
        </nav>
    </header>

1. Footer

Il tag <footer> rappresenta il piè di pagina di una pagina o di una sezione. Generalmente contiene informazioni come il copyright, i link ai social media, contatti, link di navigazione secondari o informazioni legali.

Utilizzo: Usato alla fine di una pagina o di una sezione, può essere utilizzato anche per chiudere singoli articoli o sezioni.

Esempio:

1
2
3
4
5
6
7
    <footer>
        <p>&copy; 2024 Matteo Ricci. Tutti i diritti riservati.</p>
        <nav>
            <a href="#privacy">Privacy</a> |
            <a href="#terms">Termini di Servizio</a>
        </nav>
    </footer>

1. nav

Il tag <nav> definisce un’area di navigazione all’interno della pagina web, raggruppando i link che permettono agli utenti di navigare tra le sezioni principali del sito o della pagina.

Utilizzo: Di solito contiene il menu principale, collegamenti a diverse parti della pagina o a pagine diverse del sito. È utilizzato una volta nella pagina, ma può essere ripetuto se necessario per sottosezioni.

Esempio:

1
2
3
4
5
6
7
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#servizi">Servizi</a></li>
            <li><a href="#contatti">Contatti</a></li>
        </ul>
    </nav>

1. section

Il tag <section> identifica una sezione tematica del documento, ovvero un blocco di contenuti correlati che possono stare insieme logicamente. È utile per dividere i contenuti di una pagina in blocchi organizzati.

Utilizzo: Utilizzato per segmentare il contenuto in sezioni con una logica coerente, come la divisione di un articolo in più capitoli o di una homepage in blocchi di contenuto differenti (ad esempio, “Servizi”, “Testimonianze”, “Portfolio”).

Esempio:

1
2
3
4
    <section>
        <h2>I Nostri Servizi</h2>
        <p>Offriamo una vasta gamma di servizi per soddisfare ogni esigenza.</p>
    </section>

1. article

Il tag <article> rappresenta un contenuto autonomo e indipendente, come un articolo di un blog, un post, una notizia o qualsiasi altro contenuto che ha senso anche fuori dal contesto della pagina.

Utilizzo: Perfetto per articoli di blog, news o post, perché ciascun blocco è un’unità autosufficiente che può essere condivisa o pubblicata separatamente.

Esempio:

1
2
3
4
    <article>
        <h2>Titolo dell'Articolo</h2>
        <p>Testo dell'articolo, contenente informazioni dettagliate e rilevanti.</p>
    </article>

1. aside

Il tag <aside> contiene informazioni collaterali, come barre laterali, biografie dell’autore, citazioni aggiuntive o contenuti che arricchiscono l’argomento principale.

Utilizzo: Tipicamente usato per contenuti secondari che accompagnano la sezione principale della pagina, come widget o box informativi. Il contenuto di <aside> non è il focus principale della pagina ma offre informazioni aggiuntive.

Esempio:

1
2
3
4
    <aside>
        <h3>Autore dell'Articolo</h3>
        <p>Matteo Ricci, appassionato di programmazione e disegno.</p>
    </aside>

1. main

Il tag <main> rappresenta il contenuto principale della pagina, il nucleo del documento. Non deve contenere elementi come <header>, <footer>, <nav>, <aside>, in quanto è riservato al contenuto centrale.

Utilizzo: Si usa una sola volta per pagina, per racchiudere tutti gli elementi di contenuto significativi, evitando componenti di layout o informazioni secondarie.

Esempio:

1
2
3
4
5
6
7
8
9
10
    <main>
        <section>
            <h2>Benvenuti</h2>
            <p>Questo è il contenuto principale della pagina.</p>
        </section>
        <article>
            <h2>Notizia Importante</h2>
            <p>Dettagli sulla notizia.</p>
        </article>
    </main>

Vantaggi dell’uso di tag semantici

Miglioramento dell’accessibilità: I tag semantici aiutano gli screen reader a identificare facilmente la struttura della pagina.

SEO e indicizzazione: I motori di ricerca comprendono meglio la struttura, migliorando l’indicizzazione.

Manutenibilità e leggibilità: Codice più organizzato e intuitivo da comprendere e aggiornare.

Coerenza cross-browser: I browser moderni supportano i tag semantici, garantendo una presentazione coerente.

In conclusione, la formattazione semantica si rivela un pilastro fondamentale per ottimizzare il posizionamento sui motori di ricerca e migliorare l’esperienza utente.

Applicare le best practice significa strutturare contenuti accessibili, ben organizzati e in grado di comunicare ai motori di ricerca l’importanza e il significato di ciascun elemento.

Utilizzare tag appropriati, gerarchie logiche e una divisione chiara dei contenuti non solo favorisce la SEO, ma crea anche un ambiente digitale più intuitivo e leggibile.

Seguendo questi accorgimenti, è possibile migliorare notevolmente la visibilità del sito e fidelizzare gli utenti, aumentando il valore complessivo della presenza online.

Questa guida alla formattazione semantica dovrebbe aiutarti a migliorare la qualità del tuo codice HTML, rendendolo più chiaro e professionale.

Capitolo 6: “Tabelle in HTML”