Guida ad HTML5: introduzione

HTML 5 rappresenta l’ultima incarnazione dello standard web più famoso ed introduce numerose novità, che hanno già fatto il loro esordio in numerosi siti web e che promettono di elevare l’esperienza web grazie alla gestione nativa dei contenuti multimediali, il funzionamento offline, la validazione delle form, la semantica, … .

In questo post offriremo un’introduzione al linguaggio HTML 5, rivolta particolarmente agli sviluppatori che abbiano scarse conoscenze relative a linguaggio HTML nelle sue varie incarnazioni (XHTML o HTML 4).

Nel post successivo vedremo in dettaglio lo scheletro di una generica pagina web HTML 5, che rappresenta il minimo indispensabile su cui progettare qualsiasi pagina web. In seguito approfondiremo le singole funzionalità o caratteristiche degne di nota e interesse e che contraddistinguono questo linguaggio.

Per chi desiderasse approfondire gli argomenti trattati si rimanda alla “bibbia” dell’HTML 5, ossia lo standard del W3C. All’interno dei post verranno forniti riferimenti a sezioni specifiche dello standard, cui afferiscono i temi trattati e contenenti informazioni esaustive.

Elementi HTML

La struttura di ciascuna pagina web può essere rappresentata come una gerarchia di elementi (tag, in inglese), ciascuno dei quali prevede:

  • un tag di apertura (ad esempio, <html>);
  • un tag di chiusura (ad esempio, </html>).

Alcuni elementi fanno eccezione e ricorrono ad un tag singolo (ad esempio, <meta />).

Annidamento. Come indicato dalla struttura gerarchica, gli elementi devono essere annidati correttamente: analogamente ad una matriosca, i figli (elementi interni) di un certo elemento devono essere interamente racchiusi tra il tag di apertura e quello di chiusura del padre. In altri termini l’ordine di apparizione dei tag di chiusura dev’essere inverso rispetto all’ordine dei tag di apertura.

La radice della gerarchia corrisponde all’elemento html, avente a sua volta due figli: head e body. L’elemento head include i metadati associati alla pagina, ossia un insieme di informazioni (titolo, codifica dei caratteri, lingua, fogli di stile utilizzati, …) relativi ai contenuti della pagina, mentre l’elemento body rappresenta il contenuto vero e proprio, visualizzato nel vostro browser.

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
 </body>
</html>

Attributi. Per ciascun elemento è definito un insieme di attributi, inseribili nel tag di apertura e costituiti da un nome e un valore separati dal carattere ‘=’ (uguale). Questi si possono classificare in opzionali (utilizzabili a discrezione dell’utente) e obbligatori (richiesti per garantire la correttezza sintattica del documento).

A differenza dello standard XHTML, alcuni attributi possono risultare privi del relativo valore (sono i casi banali in cui il nome è autoesplicativo e il valore – ove inserito – coincide con il nome) mentre, se presente, dev’essere racchiuso tra virgolette (singole o doppie) solo nel caso in cui includa degli spazi o alcuni caratteri particolari (per l’elenco completo si veda la sezione 1.9 dello standard). Per evitare problemi o dimenticanze, può risultare buona prassi racchiudere sempre il valore tra virgolette.

Semantica, non presentazione!

Ciascun elemento (ed i relativi attributi) hanno un significato ben preciso, che consente ai motori di ricerca, ai browser ed altre componenti software di interpretare correttamente i contenuti testuali della pagina: l’originalità, qualità e correttezza sintattica di questi ultimi rappresentano caratteristiche fondamentali per facilitare l’individuazione e la catalogazione delle informazioni presenti.

Gli elementi hanno precisamente lo scopo di comunicare ai software che analizzano la pagina la natura e il significato delle informazioni presenti: ad esempio, l’elemento <h1> racchiude il titolo di una pagina (o di una relativa sezione), <ul> definisce una lista di valori, <nav> rappresenta un menu di navigazione (del sito, della pagina, …), <audio> o <video> un contenuto multimediale, … .

Alla luce di ciò occorre scegliere gli elementi e gli attributi da utilizzare solo ed esclusivamente in base al loro valore semantico, ossia il significato che noi intendiamo attribuire alle informazioni inserite. Solo in un momento successivo si cura la presentazione della pagina (layout, colori, …). mediante i fogli di stile.

Correttezza sintattica e semantica

HTML è un linguaggio e – in quanto tale – prevede delle regole rispetto alla possibilità di combinare le parole (gli elementi) per comporre una frase (il documento).

Correttezza sintattica. Nello specifico, per ciascun elemento lo standard definisce il modello di contenuto, che vincola ciò che è possibile inserire al suo interno (qualsiasi elemento, uno o più specifici, contenuto testuale, …). Ad esempio l’elemento html prevede due figli – gli elementi head e body – in questo preciso ordine e numero (non uno di più, non uno di meno). Una pagina è corretta sul piano sintattico se rispetta tutte queste regole: lo si può verificare facilmente attraverso il validatore ufficiale del W3C.

Correttezza semantica. La correttezza semantica, rispetto alla quale la correttezza sintattica rappresenta una condizione necessaria ma non sufficiente, ha a che fare con il significato di una frase e consiste nel verificare se questa abbia senso compiuto. Analogamente alle lingue parlate, ove affinché una frase abbia senso compiuto non è sufficiente che sia corretta sul piano ortografico, grammaticale, sintattico e della punteggiatura, così nell’ambito web la correttezza semantica si può dire raggiunta qualora l’informazione associata ad un elemento sia correttamente classificata dal significato corrispondente (il testo incluso in un elemento h1 è un titolo, i valori racchiusi negli elementi li rappresentano i valori di una lista, …).

Leggere le specifiche

Lo standard HTML5 fornisce – per ciascun elemento – un riepilogo iniziale contenente alcune informazioni di riferimento preziose.

Categories
Indica le categorie di appartenenza dell’elemento (v. sezione Categorie).
Contexts in which this element can be used
Indica le posizioni (nella gerarchia) in cui può trovarsi un’occorrenza dell’elemento.
Content model
Indica gli elementi che possono essere inseriti all’interno dell’elemento corrente, specificando – ove richiesto – numero e ordine precisi.
Content attributes
Indica gli attributi assegnabili all’elemento (per gli attributi comuni, v. sezione Attributi globali).
DOM interface
Indica l’interfaccia (insieme di metodi o attributi) relativa all’oggetto corrispondente nel DOM e accessibile mediante Javascript (per approfondimenti si rimanda ad un post successivo).

Attributi globali

Tutti gli elementi HTML condividono un insieme di attributi comuni, il cui significato è identico con sfumature particolari per certuni elementi. Vediamo insieme gli attributi più interessanti e utilizzati ed il loro significato (per la lista completa, consultare la sezione 3.2.3 dello standard).

accesskey
Facilita la navigazione da tastiera di una pagina, consentendo di associare ad un elemento uno o più singoli caratteri (separati mediante spazio) con cui selezionarlo facilmente da tastiera. Ogni browser prevede una diversa combinazione di tasti da utilizzare: si consiglia di consultare la documentazione specifica.
Questa tecnica si rivela particolarmente utile – nell’ambito dell’accessibilità – per fornire accesso rapido alle voci del menu di navigazione, assegnando a ciascun collegamento un valore differente per l’attributo accesskey. Per scongiurare ptenziali conflitti con le scorciatoie da tastiera dell’applicazione, si consiglia di utilizzare valori numerici crescenti e di rendere l’utente consapevole della loro esistenza (ad esempio mediante l’attributo title o segnalandoli comunque in modo chiaro).
class
Consente di assegnare un insieme di “etichette” (stringhe prive di spazi) agli elementi, separate mediante uno spazio. Ciascuna etichetta può essere assegnata ad un numero arbitrario di elementi, definendo una categoria (o classe) di elementi. In ossequio alla natura semantica del linguaggio HTML, si raccomanda di scegliere le etichette in accordo al significato degli elementi e dei relativi contenuti, non in base ad aspetti legati alla presentazione. Come pratica da evitare, si guardi l’attributo class delle immagini nei post di WordPress, che contiene puramente indicazioni legate al posizionamento e alla dimensione dell’immagine.
contenteditable
A partire da HTML 5, è possibile rendere il contenuto degli elementi (liste, paragrafi, …) modificabile mediante questo attributo, che non richiede alcun valore. Le eventuali modifiche non vengono preservate una volta chiusa o aggiornata la pagina, tuttavia può risultare semplice implementare tale comportamento mediante Javascript.
contextmenu
A partire da HTML 5, è possibile associare ad un elemento un menu contestuale personalizzato, cui si accede facendo clic con il tasto destro del mouse. Particolarmente utile per gestire operazioni su liste o tabelle di valori.
dir
Definisce la direzione di lettura del testo e può assumere tre valori: “ltr” (da sinistra a destra, comune alle lingue occidentali), “rtl” (da destra a sinistra, ad esempio l’arabo) o “auto” (determinato in base al contenuto dell’elemento e alla lingua).
id
Stringa priva di spazi che identifica univocamente un elemento della pagina. Non è possibile naturalmente assegnare il medesimo id a più di un elemento.
lang
Permette di specificare la lingua dei contenuti di un elemento (utile ove la lingua sia differente rispetto a quella principale del documento, si applica ricorsivamente a tutti i figli).
style
Consente di associare del codice CSS all’elemento. Utile in fase di sviluppo, si raccomanda di mantenere il codice CSS in fogli di stile separati per ragioni di manutenibilità.
title
Fornisce informazioni aggiuntive su un elemento (la descrizione di un’immagine, la destinazione di un collegamento, la forma estesa di un’abbreviazione, la fonte di una citazione, …), visualizzate (in genere) al passaggio del mouse mediante un tooltip e particolarmente utili nell’ambito dell’accessibilità;

Categorie

Lo standard HTML5 classifica l’insieme degli elementi in categorie semantiche, che possono aiutare ad organizzare (mentalmente) gli elementi disponibili e a scegliere – in ogni occasione – quello più adeguato. Ecco la lista completa delle categorie (per informazioni specifiche, si rimanda alla sezione 3.2.5.1 dello standard):

Metadati
Proprietà e informazioni aggiuntive relative al documento (link, meta, title, …).
Flusso
Gestione del flusso dei contenuti (macro insieme inclusivo della maggior parte degli elementi).
Sezioni
Organizzazione della pagina in blocchi logici e sezioni (article, aside, nav, section).
Intestazione
Intestazioni di pagina o di sezione (header, hgroup, h1, h2, …).
Contenuti testuali
Gestione dei blocchi di testo (a, abbr, audio, video, …).
Contenuti incorporati
Contenuti multimediali (audio e video), formule matematiche (math), immagini (img), … .
Contenuti interattivi
Contenuti interattivi (audio, video, …) e form.
Annunci

Un pensiero riguardo “Guida ad HTML5: introduzione

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...