La struttura base di una pagina HTML5

Eccoci giunti ad un articolo dagli argomenti fin troppo spesso lasciati da parte da chi inizia a lavorare in questo settore. All’interno dei nostri corsi non ci annoiamo mai di ricordare l’importanza di iniziare dalle basi, conoscere i linguaggi che ci permettono di creare il web tornerà sempre utile soprattutto nei momenti più intensi!

Il mio compito non è quello di farti paura o di farti sentire in colpa perché fino ad oggi non ti sei messo a studiare questo linguaggio, ma piuttosto quello di guidarti nell’apprendimento perché questi nuovi tag HTML5 (gli elementi che inseriamo nella pagina) sono stati pensati per migliorare la SEO delle tue pagine e utilizzarli all’interno del tuo lavoro non farà altro che migliorare la tua professionalità.

Sono molto più descrittivi rispetto ai precedenti elementi div e span, che vengono considerati come dei “contenitori generali”, senza specificare alcuna semanticità del testo che contengono.

Dato che vuoi sapere come creare una pagina web con il linguaggio HTML5, credo che sia meglio saltare subito al contenuto e scoprire quale sia la sua struttura di base, struttura senza la quale una pagina HTML5 non esisterebbe…

Struttura Base

Per fare in modo che il codice che andrai ad inserire sia compreso dal browser, dovrai per prima cosa creare un file di testo con estensione .html (anche .htm è supportato ma non viene più usato molto).

Mi raccomando, non usare Word per creare questo file ma sfrutta un buon editor di codice che ti può aiutare a comprendere meglio la struttura del file e degli elementi che stai inserendo.

All’interno di questo file potrai inserire un gran numero di elementi (tag) ma l’elemento radice, dovrà essere assolutamente l’elemento <html>:

<html>

    <head>
        <title>Titolo della pagina</title>
    </head>

    <body>
        Contenuto Pagina
    </body>

</html>

Questo è un esempio veramente semplice, in effetti non abbiamo ancora creato una vera pagina HTML5 ma soltanto una pagina HTML. Ho deciso però di iniziare con questo esempio per mostrarti che il codice contenuto al suo interno ha un ordinamento ad albero annidato. Mantenere questa struttura ti aiuterà a organizzare meglio il tuo codice e evidenzierà le relazioni di “parentela” che sono presenti tra gli elementi.

Come ti ho detto, il tag principale è <html> e come puoi notare dal blocco di codice precedente contiene altri due tag:

<head>– tradotto in italiano significa testa, definisce la parte logistica della pagina, come ad esempio il titolo (aggiunto con il tag <title>) e all’interno del quale possiamo anche collegare altri file interessanti per la pagina come i fogli di stile e gli script JavaScript.
<body> – se traduziamo questo in italiano scopriamo che significa corpo e quindi conterrà tutte le informazioni che vogliamo mostrare all’interno della pagina e che verranno indicizzate dai motori di ricerca e interpretati anche dei programmi dedicati all’accessibilità.

Dopo l'elemtento gli elementi più importanti dell'HTML sono e , ricordalo!

Questi due elementi sono fondamentali per le nostre pagine HTML perché ci consentono di separare le funzionalità del codice che includono al loro interno. In quest’ultima frase ho parlato di inclusione perché come puoi vedere questi tag presentano un’apertura (<...>) e una chiusura (</...>) e all’interno di queste due dichiarazioni possiamo inserire del codice che può essere interpretato dal browser.

Adesso prova a salvare la tua pagina .html, il mio consiglio è chiamarla index.html, e visualizza nel tuo browser la pagina appena realizzata.

Se hai provato a fare l’esperimento che ti ho appena suggerito avrai visto una semplicissima pagina HTML che è magicamente apparsa all’interno del tuo browser. Forse magicamente non è stato il termine più corretto dato che hai dovuto aprire il tuo editor di codice e inserire il blocco di codice che ti ho suggerito poco sopra, però di tutto quello strano testo nel tuo browser si vede soltanto Contenuto pagina.

Perché?

Differenze tra `<head>` e `<body>`

Come ti ho anticipato poco fa, i due tag hanno uno scopo sia semantico che logico completamente differenti.

Il primo contiene principalmente codice per il funzionamento della pagina perchè, essendo in cima, è il primo che viene elaborato dal browser. È importante capire fin da ora questo comportamento perché per tutte le pagine web il codice viene elaborato partendo dall’alto verso il basso ed è un dettaglio molto importante presente nella maggior parte dei linguaggi di programmazione.

Come anticipato precedentemente, oltre a <title> il tag <head> può contenere i riferimenti ai file CSS o JavaScript e altri tag <meta> che possono servire ai motori di ricerca oppure ai social network.

Se hai sentito parlare delle Open Graph di Facebook avrai compreso che permettono di fornire a questo social network delle informazioni relative all’articolo che viene condiviso sul proprio social network, informazioni come l’immagine in evidenza, il titolo , la descrizione e altri piccoli dettagli. Per fare questo si usa proprio l’elemento <meta> arricchito da alcuni attributi particolari.

All’interno del tag <head> possono essere ospitati anche altri elementi utili sia per la SEO che per inserire i riferimenti ai Feed RSS che permettono al visitatore di iscriversi agli aggiornamenti del blog, ma sarà meglio parlare di questi argomenti un’altra volta.

Passiamo adesso al tag <body> che può contenere un grandissimo numero di tag a cominciare dai nuovi elementi semantici come <header>, <nav>, <audio> e <video> introdotti in HTML5, ma anche i classici <div> o <p>.

Ognuno di questi tag ha un nome specifico dovuto alla sua funzione e ha anche delle proprietà specifiche che gli permettono di assumere un comportamento diverso all’interno delle nostre pagine.

Una cosa molto importante da comprendere prima ancora di proseguire è che se inserisci un tag che và in <body> all’interno di <head> non funzionerà mentre, alcuni tag come i riferimenti ai CSS o JavaScript funzionano anche se inseriti in <body>.  Questo perchè <head> è stato studiato solo per contenere le informazioni della pagina mentre il <body> è lo spazio che mostra quello che contiene.

Alla scoperta degli elementi semantici in HTML5

Adesso che abbiamo visto le caratteristiche principali di <head> e <body> penso che sia proprio giunto il momento di scoprire qualche curiosità sui tag che abbiamo appena conosciuto.

Molti elementi in HTML5 hanno valore semantico che aiuta i motori di ricerca nell'indicizzazione!

Ti inserirò anche qualche altro tag HTML5 per farti avere uno sguardo completo sui tag strutturali di questo nuovo linguaggio:

<header> e <footer> – come puoi immaginare dal nome, questi sono la testata e il piè di pagina (dell’intera pagina o di una singola sezione e possono essere ripetuti nella pagina);
<section> – identifica una sezione del documento e può contenere al suo interno <header> e <footer>;
<nav> – è il menu della pagina e può essere ripetuto, meglio non abusare perché è un elemento che interessa molto i motori di ricerca;
<aside> – è la barra laterale e serve per differenziare del contenuto non correlato alla pagina stessa.

Questi tag rimpiazzano i div che non presentano alcun valore semantico all’interno della pagina. Se stai già lavorato con HTML dovresti sapere che il div è un elemento blocco che serve a creare un box nella tua pagina e che ha valore soltanto per la creazione del layout. Tutti i tag che ti ho appena descritto per il browser sono equivalenti ai div, creano dei box che lo aiutano a disegnare la pagina. Dal punto di vista del browser hanno solamente un altro nome.

Per un motore di ricerca è diverso perchè gli permettono di capire quale sia il contenuto al suo interno e come è organizzata la pagina.

Questa è una delle grandi novità dell’HTML5 alta leggibilità dei tag (i tag audio e video sono autoesplicativi per esempio) ed elaborazione semplificata per i motori di ricerca.

NB: Usare HTML5 non rende il tuo sito ottimizzato per i motori di ricerca perchè ci sono molti altri accorgimenti e tag da usare (OpenGraph per i social network e Schema.org per aggiungere ulteriori informazioni semantiche), ma aiutano molto gli spider a identificare quale sia il contenuto da indicizzare.

Questi tag vanno inseriti all’interno del tag <body> perché descrivono meglio il contenuto, naturalmente il tag <div> può essere sempre usato perchè usare solo questi tag non permette la realizzazione di un layout completo e graficamente appagante.

Ecco un’esempio di pagina HTML5:

All’interno di questa pagina vengono inseriti tutti gli elementi che ti ho descritto precedentemente e mostra anche come sia possibile ripetere gli elementi <header> e <footer> all’interno dei contenitori specifici per un articolo, perché in fin dei conti anche un <article> ha la necessità di avere una testata e un piede che possono contenere informazioni come il titolo, il nome dell’autore, le categorie di appartenenza e altre informazioni che possono arricchire la lettura dell’articolo.

Però se stai atteno avrai notato che c’è un elemento che non ti ho ancora descritto e che “vive” fuori da qualsiasi elemento descritto in questo articolo, l’hai visto?

Il Doctype

Come puoi vedere dalla prima riga dell’immagine c’è questo strano codice <!DocType html> a cosa servirà?

Il tag Doctype è derivato da XML (da cui è derivato HTML) e questo tag serve per capire qual’è la versione HTML in cui è scritta la pagina. Come sai se questa è la versione 5 vuol dire che prima ci sono state altre 4, per non parlare delle varianti.

Tramite questo codice si dice al browser o al motore di ricerca che deve trattare la pagina come HTML5.

Le versioni di IE6-8 (obsolete finalmente!) non riconoscono i nuovi tag ed è necessario usare librerie JavaScript come html5shiv che permettono di fare un rendering corretto. Per usare questa libreria con versioni minori di IE9 è possibile inserire questo codice all’interno di <head>:

<!--[if lt IE 9]> 
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->

Consultando la tabella di utilizzo dei browser su CanIUse si scopre che questi browser non coprono neanche lo 0,3% di utilizzo ma devi supportare queste versioni, magari perché stai realizzando un sito web per qualche PA che da 10 anni non sostituisce i computer dei suoi dipendenti, puoi farlo utilizzando i commenti condizionali di IE (per esempio <!--[if lt IE 9]> ) che permettono di far elaborare del codice solamente a specifiche versioni di Internet Explorer.

Questa funzionalità è presente solo in questo browser ed è stata inserita perchè si comporta in modo diverso o buggato rispetto agli altri. L’approfondiremo un’altra volta ma fai diventare la massima “IE è il male” e vedrai come lavorerai tranquillo!

Conclusioni

In questo breve articolo ti ho presentato alcuni dei tag HTML5 più interessanti e semantici che ti consigliamo di utilizzare per rendere le tue pagine più comprensibili e utili anche dal punto di vista dei motori di ricerca. Ripeto, non sto dicendo che utilizzando soltanto questi elementi le tue pagine saliranno di posizione ma sarai in grado di rendere la vita più facile a tutti gli spider che desiderano indicizzare le tue pagine.

Cosa che sicuramente non fa male.

Per poter migliorare il posizionamento del proprio sito si devono svolgere molte operazioni come aggiungere attributi semantici come quelli offerti da Schema.org, migliorare le prestazioni del proprio sito web e assicurarci che il nostro contenuto sia consultabile da diversi dispositivi sfruttando il responsive design.

La SEO è un argomento incredibilmente vasto e anche seguendo i precedenti consigli non posso assicurarti che il tuo sito web si posizionerà nella prima posizione per la ricerca di tuo interesse. Esistono più di 200 fattori che Google tiene in considerazione per posizionare le pagine sulle proprie SERP e anche se quanto ti ho detto aiuterà (molto) l’indicizzazione del tuo sito web, per quanto riguarda il posizionamento non possiamo esserne certi.

Prima di concludere volevo ricordarti quanto sia essenziale conoscere e usare questi elementi HTML5, in molti mi chiedono perché e percome noi abbiamo una lotta aperta nei confronti dei page builder e molto spesso basta ispezionare il codice generato da questi strumenti per capire velocemente che le pagine generate non offrono alcun valore semantico, sono piene di <div> e <span> senza neanche l’ombra di un attributo di Schema.org

Sono curiosissimo di sapere se questo articolo ti è stato utile e quali sono le tue opinioni a riguardo quindi non vergognarti e commenta liberamente sfruttando il modulo che trovi più in basso.