L’HTML è uno strumento fondamentale per strutturare e organizzare il contenuto di una pagina web. Grazie a specifici elementi HTML, è possibile indicare chiaramente qual è il contenuto principale di una pagina. Questo aspetto è estremamente utile sia per i motori di ricerca che per rendere i contenuti più accessibili.
Per i motori di ricerca, come Google, una struttura HTML ben definita aiuta a comprendere meglio la pagina. Questo significa che possono indicizzarla in modo più efficace, migliorando il posizionamento SEO del sito nei risultati di ricerca. Quando il contenuto principale è chiaramente identificato, i motori di ricerca possono capire meglio di cosa tratta la pagina e quali informazioni sono più rilevanti.
Per quanto riguarda l’accessibilità, una struttura HTML chiara è fondamentale per le persone con disabilità. Ad esempio, chi utilizza lettori di schermo può navigare più facilmente in una pagina web quando il contenuto è ben organizzato. Sapere dove si trova esattamente il contenuto principale permette agli utenti di focalizzarsi direttamente sulle informazioni più importanti, senza dover attraversare contenuti irrilevanti o secondari.
I motori di ricerca, come Google, sono diventati molto bravi a capire il significato dei testi che trovano nei siti web. Questo ha reso molto importante organizzare i contenuti in maniera chiara e focalizzata su specifici argomenti. In pratica, quando scrivi per il web, devi scegliere un argomento per ogni pagina o articolo e trattarlo in modo approfondito e senza ambiguità. Questo aiuta i motori di ricerca a capire meglio di cosa parla il tuo sito, migliorando così la tua visibilità nei risultati di ricerca.
L’HTML è il linguaggio con cui sono costruite le pagine web. Quando è “semantico”, usa dei tag specifici per descrivere i vari elementi della pagina (come titoli, paragrafi, ecc.) in modo che siano chiari non solo agli umani, ma anche ai motori di ricerca. Questo è fondamentale sia per la strategia SEO, perché aiuta i motori di ricerca a capire e indicizzare meglio il tuo sito, sia per l’accessibilità, perché rende i contenuti più facilmente fruibili anche da persone con disabilità, ad esempio tramite lettori di schermo.
Per essere chiari, l’HTML semantico non è un fattore di ranking diretto. Serve piuttosto a facilitare l’identificazione, da parte dei motori di ricerca, del contenuto principale di una pagina, il che è molto positivo.
Le linee guida di Google per i valutatori della qualità di ricerca fanno distinzione tra tre tipi di contenuto in una pagina web:
- Contenuto principale.
- Contenuto supplementare.
- Contenuto pubblicitario.
Il contenuto principale è ciò che i motori di ricerca vogliono indicizzare e posizionare.
Il contenuto supplementare è utile, come la navigazione del sito, ma non è ciò che interessa ai motori di ricerca per l’indicizzazione.
Anche il contenuto pubblicitario non è ciò che i motori di ricerca vanno a cercare quando esplorano una pagina web.
Solo il contenuto principale aiuta una pagina web a raggiungere il suo scopo e, secondo le linee guida per i valutatori della qualità, è questo a ricevere un punteggio più alto per la qualità della pagina.
Sebbene ciò probabilmente non sia un segnale di ranking, creare un contenuto principale che raggiunga lo scopo della pagina rimane un obiettivo importante per tutti gli editori e i consulenti SEO.
All’inizio della Parte 1 della guida per i valutatori delle ricerche, viene descritto un compito specifico che i valutatori devono svolgere. Questo compito include l’analisi di una singola pagina web, identificata da un URL (l’indirizzo della pagina su internet). I valutatori ricevono una griglia, ovvero uno strumento per annotare le loro osservazioni e valutazioni, mentre esaminano attentamente la pagina web e il sito a cui essa appartiene.
L’obiettivo principale di questa valutazione è capire quanto bene la pagina riesce a realizzare il suo scopo. In altre parole, i valutatori devono stabilire se la pagina soddisfa efficacemente l’intento per cui è stata creata. Questo può includere vari aspetti, come la fornitura di informazioni, l’intrattenimento, la vendita di un prodotto, o qualsiasi altro obiettivo che la pagina si propone di raggiungere.
La chiave per raggiungere lo scopo è nel contenuto principale. L’HTML semantico aiuta i crawler dei motori di ricerca a concentrarsi su quel contenuto principale.
La regola numero uno della consulenza SEO è rendere le pagine web facili da comprendere per i motori di ricerca.
L’HTML semantico rappresenta la base fondamentale per la struttura di una pagina web. È un po’ come il telaio di una casa, su cui poi si costruiscono le pareti e il tetto. In questo caso, il “telaio” è fatto di elementi HTML che descrivono chiaramente il ruolo di ogni parte della pagina: se è il contenuto principale, contenuto aggiuntivo o pubblicità.
Questa suddivisione non riguarda le parole nel loro senso letterale, ma piuttosto il ruolo che ogni sezione svolge all’interno della pagina. “Semantico”, in questo contesto, significa che ogni elemento HTML è usato in modo da indicare il suo significato specifico. Per esempio, un tag come <header> indica l’inizio della pagina, mentre <article> indica il contenuto principale.
È come se una pagina web fosse un corpo umano. Il corpo ha diverse parti, come la testa, il tronco, le braccia e le gambe, ciascuna con una sua funzione specifica. Allo stesso modo, una pagina web è composta da diverse sezioni, ognuna con un suo scopo preciso: fornire il contenuto principale, offrire informazioni aggiuntive o mostrare pubblicità. L’HTML semantico aiuta a organizzare queste sezioni in modo che sia chiaro per chi legge (e per i motori di ricerca) quale parte svolge una determinata funzione.
La struttura tipica di una pagina web è così:
- Intestazione (la parte superiore con il logo).
- Navigazione.
- Contenuto principale.
- Piè di pagina.
Come abbiamo detto, la sezione contenuto principale è la parte che interessa di più ai motori di ricerca quando indicizzano una pagina web. È anche la parte a cui si riferiscono le linee guida per i valutatori della qualità di ricerca.
Nell’indicizzazione di una pagina web, ai motori di ricerca non interessano la navigazione, il piè di pagina, la pubblicità, le barre laterali o le sezioni di intestazione. Loro si concentrano sull’indicizzazione del contenuto principale.
L’HTML semantico indica ai motori di ricerca esattamente dove si trova il contenuto principale, così che l’indicizzatore possa prenderlo e classificarlo.
Come localizzare il contenuto principale e i vari elementi HTML di una pagina web
L’elemento HTML <main>
Indicare a un motore di ricerca quale contenuto di una pagina web indicizzare è facile come usare l’elemento HTML <main>.
L’elemento <main> ha un tag di apertura (<main>) per segnare l’inizio del contenuto principale.
E ha un tag di chiusura (</main>) per segnare la fine del contenuto principale.
Una pagina web può avere solo una sezione <main>.
Nella sezione dove inizia il tuo contenuto principale, inserisci semplicemente l’elemento <main>. Quindi usa l’elemento HTML di chiusura </main>, per segnalare dove finisce la sezione principale del contenuto.
Questo rende super facile per i motori di ricerca arrivare al contenuto principale e indicizzarlo.
È fantastico, vero?
Elementi <header>, <nav> e <footer>
Ci sono altri elementi HTML semantici per dividere una pagina. L’elemento <header> può essere usato per indicare l’area nella parte superiore della pagina dove si trovano il logo e forse una barra di ricerca. È la sezione che si trova tipicamente sopra l’area di navigazione. L’elemento <header> può anche essere utilizzato per incapsulare le intestazioni (H1, H2, ecc.), ma ciò non è realmente necessario.
L’elemento <nav> è ciò che avvolgi attorno all’area di navigazione. Ad esempio, se l’area di navigazione si trova all’interno di un <div></div>, puoi aggiungere gli elementi <nav> dopo il <div>.
Tecnicamente, l’elemento <div> non è necessario se si utilizza l’elemento <nav>. Entrambi si comportano come contenitori, esattamente allo stesso modo in tutti i browser moderni. L’elemento <nav> è un contenitore come un <div>, ma il <nav> è un contenitore che ha un significato semantico, mentre il div non ha un significato semantico, è solo un contenitore.
L’elemento <nav> è usato per identificare una sezione di navigazione, cioè una parte della pagina che contiene collegamenti, come menu o indici. È normale che un <nav> sia inserito all’interno di un <div>, che è un contenitore generico. Tuttavia, non è consigliato inserire un <div> all’interno di un <nav>, perché questo potrebbe creare confusione, soprattutto per i lettori di schermo utilizzati dalle persone con disabilità visive. Un lettore di schermo si aspetta di trovare solo elementi di navigazione, come collegamenti, all’interno di un <nav>.
Passiamo poi all’elemento <footer>. Questo, come il <nav>, è un tipo di contenitore. La differenza principale tra un <footer> e un <div> sta nel significato semantico. Mentre <div> è neutro e non comunica nulla sul suo contenuto, <footer> è specificamente destinato a contenere il piè di pagina del sito, come informazioni di contatto, copyright o link utili. Questo significato semantico aiuta sia gli utenti che i motori di ricerca a capire immediatamente la funzione di quella parte della pagina.
In breve, sia <nav> che <footer> sono elementi HTML che, a differenza del generico <div>, hanno un significato specifico che indica la loro funzione nella struttura della pagina. Questo aiuta a rendere la pagina più chiara e accessibile.
L’elemento <aside>
Immagina di avere una pagina web con un contenuto principale, accompagnato da barre laterali, spazi pubblicitari e sezioni che offrono informazioni aggiuntive, solo vagamente legate al tema principale. Qui entra in gioco l’elemento <aside>.
L’elemento <aside> viene usato per segnalare contenuti che, pur essendo parte della pagina, non sono direttamente collegati al tema centrale. È come dire: “ecco qualcosa di interessante, ma non è il cuore dell’argomento.” Questo elemento si contraddistingue per un tag di apertura <aside> e un tag di chiusura </aside>, che incorniciano il contenuto che intendi segnalare come ‘a margine’.
Ecco alcuni esempi di come si può usare <aside>:
- Per incapsulare un paragrafo su un argomento secondario:
<aside><p>Questo è un contenuto secondario...</p></aside>. - Per inserire pubblicità:
<aside><div>Pubblicità affiliata qui</div></aside>. - Per una barra laterale con contenuti non primari:
<aside>Contenuto della barra laterale</aside>.
L’elemento <article>
Ora, parlando dell’elemento <article>, questo ha un ruolo diverso. È specificamente designato per incapsulare il contenuto principale, quello che è veramente al centro della pagina. Un articolo, cioè il nucleo centrale dell’informazione, può essere inserito all’interno di un elemento <main>, che funge da contenitore principale per il contenuto di rilievo. Tuttavia, non è consigliato fare il contrario, ovvero inserire <main> dentro <article>, perché quest’ultimo è pensato per contenuti specifici, mentre <main> ha un ambito più ampio.
Altri elementi HTML
Ci sono circa 100 elementi semantici, ma non è necessario usarli tutti.
Se vuoi approfondire gli elementi semantici, dai un’occhiata alle pagine di html.it.
Se vuoi creare una pagina web semplice ma efficace, ci sono alcuni elementi HTML che dovresti considerare come essenziali.
Gli elementi di base sono <main> e <aside>.
<main>è usato per il contenuto principale della tua pagina. È la parte centrale del sito, dove si trova l’informazione più importante che vuoi mostrare agli utenti.<aside>è per i contenuti secondari, come informazioni aggiuntive, pubblicità o collegamenti. Anche se non sono il focus principale della pagina, questi elementi sono comunque utili.
Per una struttura ancora più organizzata e funzionale, aggiungi questi elementi:
<header>per l’intestazione della pagina. Qui puoi inserire il titolo del sito, il logo, e altri elementi introduttivi.<nav>per la navigazione. È ideale per i menu, che aiutano gli utenti a muoversi facilmente tra le varie sezioni del tuo sito.<footer>per il piè di pagina. Qui di solito si mettono i contatti, i link utili, le note legali, e altre informazioni di fondo.
Altri elementi HTML semantici che sono molto utili, soprattutto per l’accessibilità, includono:
<button>per i pulsanti cliccabili. Sono essenziali per le interazioni dell’utente con il sito.<form>per i moduli, come quelli di iscrizione o di contatto. Sono fondamentali per raccogliere informazioni dagli utenti.<section>per suddividere il contenuto in sezioni logiche e organizzate, rendendo il sito più navigabile e comprensibile.
In sintesi, utilizzando questi elementi HTML semantici, puoi creare una pagina web ben strutturata, facile da navigare e accessibile a tutti gli utenti.
