Struttura del sito web in Html5

L'HTML5 è l'ultima versione del linguaggio di markup che consente di realizzare i siti web, se non conosci nulla di HTML può essere interessante comprendere come viene costruita una pagina web e magari provarne a fare una. Personalmente ho deciso di studiare la quinta versione dell'HTML in quanto è pensato per la ricerca semantica ed è più comprensibile dagli algoritmi dei motori di ricerca.

Senza complicare il discorso, partiamo dalla fine. Una pagina web realizzata in HTML5 è composta da poche macro aree principali, una per ogni tipologia di contenuto. Una sezione per la testata, una per il contenuto dell'articolo, una per il menù laterale e una per il piè di pagina. Per ciascuna di esse è stato creato un tag apposito.

In questo modo il motore di ricerca può distinguere più facilmente i contenuti di un documento ed evitare fraintendimenti. È facile immaginare che questo permetta di ottenere qualche vantaggio in termini di posizionamento sui motori di ricerca.

Ad esempio, la parte più bassa di una pagina web è dedicata alle informazioni di servizio: chi siamo, come contattarci, indirizzo, ecc. Queste informazioni si ripetono allo stesso modo in tutte le pagine del sito web ma non aggiungono alcun valore aggiunto al contenuto principale di ogni singolo documento. Una persona riesce a capirlo subito mentre per un algoritmo informatico è più difficile.

I nuovi macro tag del HTML5 consentono al search engine di comprendere subito la natura semantica del contenuto in una pagina a seconda del segmento in cui sono pubblicati. In tutti i casi si tratta di tag doppi, ossia sono composti da un tag di apertura e da un tag di chiusura. Vediamo i singoli nuovi tag nel dettaglio.

• <HEADER>. Il tag header identifica la testata ( header ) di un sito web. È il luogo in cui solitamente si trova il logo del sito, qualche banner e il menù di navigazione interna. Questa sezione non contribuisce al contenuto della pagina ed è, quindi, poco importante per un motore di ricerca.
• <ARTICLE>. Il tag article contiene il contenuto vero e proprio della pagina ed è in questa sezione che lo spider del search engine focalizza la sua attenzione. In questa sezione si trovano le informazioni che danno un senso alla pagina web, lo scopo per cui questa pagina si trova online.
• <ASIDE>. Il tag aside è dedicato ai menù o allo spazio informativo che affianca il contenuto principale. Ad esempio, una serie di link consigliati, le ultime notizie del sito, qualche banner pubblicitario, le informazioni sul copyright, ecc. È una zona di secondaria importanza dal punto di vista semantico. Una volta riconosciuta, il search engine può evitare di analizzarla o associargli una minore importanza.
• <FOOTER>. Il tag footer raggruppa le informazioni che generalmente sono inserite in un piè di pagina. Ad esempio, la ragione sociale, l'indirizzo di posta elettronica, la partita IVA, le condizioni di servizio, qualche link istituzionale, ecc. È lo spazio che contribuisce meno al significato della pagina anche perché gli utenti difficilmente lo leggono. Lo spider del search può evitare di considerarlo o, per meglio dire, può analizzarlo soltanto per capire la natura giuridica dell'editore del sito web.

Come puoi notare la segmentazione dei contenuti nel content-model rispecchia l'organizzazione tipica di un blog. Tuttavia, questi tag non seguono un ordine particolare e puoi visualizzarli in qualsiasi parte dello schermo. Puoi decidere di visualizzare il menù laterale <aside> a destra oppure a sinistra, in basso o in alto.

I macrotag semantici agevolano la comprensione delle informazioni da parte dei robot di Google in quanto il documento è suddiviso in segmenti semantici. Grazie a queste specifiche tecniche il linguaggio HTML5 è più vicino ai motori di ricerca ed è, almeno in parte, già ottimizzato in un'ottica SEO ( Search Engine Optimization ).

Prima dell'arrivo del HTML era molto più difficile per lo spider comprendere il significato semantico delle singole zone di una pagina web, in quanto per ciascuna di esse si utilizzava il generico tag DIV. Qui di seguito puoi vedere un esempio di struttura di un sito web in CSS.

Anche per costruire un sito in CSS era necessario suddividere la pagina in zone ma, in questo caso, il webmaster poteva assegnare a ciascuna zona un nome a suo piacimento ( nome1, nome2, ... ) senza alcuna regola standard. In questo secondo caso diventa molto più difficile capire automaticamente il significato semantico principale di una pagina. I contenuti principali dove sono? È impossibile affermarlo con certezza ed è maggiore il rischio che l'algoritmo del motore di ricerca cada in errore o fraintenda le informazioni.

In conclusione, l'introduzione dei tag semantici ( header, article, aside, footer ) è una delle principali novità del linguaggio HTML5. Non è ovviamente l'unica... oltre a questo ci sono molte altre innovazioni ma, secondo me, questa caratteristica è il miglior modo per iniziare a studiare e a capire la nuova versione dello storico linguaggio di markup.