(3 voti, media: 3,67 di 5)
Loading...
In questo articolo vedremo le specifiche del linguaggio di markup HTML5. HTML5 è l'evoluzione dell'attuale HTML 4.01, concepito come sostituto dell'XHTML 2, che doveva essere l'evoluzione dell'XHTML 1.0 ma il W3C ne ha decretato la cessazione dello sviluppo proprio in favore di HTML5. La definizione delle specifiche iniziali del linguaggio è stata effettuata da un gruppo di lavoro esterno al W3C: il WHATWG. Attualmente i lavori sono seguiti sia dal WHATWG che dal W3C HTML working group. L'intento iniziale che ha guidato il gruppo di lavoro è stato quello di proporre nuovi comandi e funzionalità fino ad allora ottenute in maniera non-standard, ossia mediante il ricorso a plug-in o a estensioni proprietarie dei vari browser. Altro obiettivo è garantire una buona compatibilità con i browser esistenti, compresi quelli obsoleti o presenti su piattaforme mobili. In questa prima parte analizzeremo la struttura di un documento HTML5 e vedremo come si differisce dal suo predecessore.
In questo articolo vedremo le specifiche del linguaggio di markup HTML5. HTML5 è l’evoluzione dell’attuale HTML 4.01, concepito come sostituto dell’XHTML 2, che doveva essere l’evoluzione dell’XHTML 1.0 ma il W3C ne ha decretato la cessazione dello sviluppo proprio in favore di HTML5.
La definizione delle specifiche iniziali del linguaggio è stata effettuata da un gruppo di lavoro esterno al W3C: il WHATWG. Attualmente i lavori sono seguiti sia dal WHATWG che dal W3C HTML working group. L’intento iniziale che ha guidato il gruppo di lavoro è stato quello di proporre nuovi comandi e funzionalità fino ad allora ottenute in maniera non-standard, ossia mediante il ricorso a plug-in o a estensioni proprietarie dei vari browser. Altro obiettivo è garantire una buona compatibilità con i browser esistenti, compresi quelli obsoleti o presenti su piattaforme mobili.
In questa prima parte analizzeremo la struttura di un documento HTML5 e vedremo come si differisce dal suo predecessore.
Iniziamo dalla definizione del formato del documento, il DOCTYPE. Nella versione 4.01 di HTML esso si presenta in questa forma:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Nel nuovo formato HTML5 è stato semplificato drasticamente:
<!DOCTYPE html>
Una pagina HTML non è nient’altro che una serie di elementi innestati e la sua struttura è ad albero, nella quale alcuni elementi possono essere allo stesso livello, come due rami che si estendono dallo stesso tronco, oppure possono esserci degli elementi “figli” di altri, come ad esempio un ramo che si estende da un ramo più grande, fino ad arrivare a elementi che non hanno figli, le cosiddette foglie. Esiste ovviamente un elemento “radice” che nel caso di HTML coincide con l’elemento con tag <html>. La definizione di tale elemento è la seguente:
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
l’attributo xmlns indica che gli elementi usati sono nel namespace di XHTML, nel nuovo formato HTML5 questo diviene ridondante e può essere eliminato. Gli altri due elementi indicano al browser che il documento è in lingua italiana, l’informazione è duplicata, quindi possiamo eliminare il tag xml:lang; solo il tag lang ha un effetto sul documento HTML5 quindi lasciamo solo quello:
<html lang="it">
Passiamo ora all’elemento head, che è il primo figlio dell’elemento html. Vediamo questo esempio in HTML 4.01:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My Weblog</title> <link rel="stylesheet" type="text/css" href="style-original.css" /> <link rel="alternate" type="application/atom+xml" title="My Weblog feed" href="/feed/" /> <link rel="search" type="application/opensearchdescription+xml" title="My Weblog search" href="opensearch.xml" /> <link rel="shortcut icon" href="/favicon.ico" /> </head>
L’elemento meta definisce il tipo di charset utilizzato all’interno del documento, cioè come i caratteri mostrati a video sono effettivamente memorizzati (codificati) in termini di bit. Il tipo di charset è inviato negli Header HTTP tra client e server, ma non sempre si ha la possibilità di intervenire su questo elemento, basti pensare che non tutti hanno accesso al proprio Web Server (l’hosting di un sito è affidato quasi sempre ad entità di terze parti), quindi lo si specifica in ogni pagina HTML.
In HTML5 basta inserire il solo attributo charset:
<meta charset="utf-8" />
Diamo ora un’occhiata alla definizione dei link:
<link rel="stylesheet" href="style-original.css" type="text/css"/>
questo link punta ad un file CSS che definisce il layout del documento corrente. In HTML5 l’attributo type non è più necessario in quanto solo i CSS possono essere usati per il layout quindi abbiamo:
<link rel="stylesheet" href="style-original.css"/>
Il link con rel=”alternate” è utilizzato per informare i Feed Reader che esiste un link per i feed sugli ultimi articoli, in questo caso l’attributo type è necessario in quanto in HTML5 esistono vari possibili formati.
Il link con attributo rel=”shortcut icon” informa il browser di associare una icona alla pagina. In HTML5 è possibile utilizzare l’attributo size.
HTML5 definisce numerosi valori per l’attributo rel, una lista di questi la possiamo trovare a questa pagina.
Vediamo ora quali sono i nuovi tag introdotti all’interno del documento:
- <section>: rappresenta una sezione, un raggruppamento tematico all’interno del documento, come ad esempio i capitoli all’interno di una tesi. Esempi di sezioni per un sito possono essere l’introduzione, l’area per i contatti o le news;
- <article>: sono componenti di una pagina che rappresentano del contenuto distribuibile e riusabile stand-alone. Ad esempio il post di un Blog (ad esempio tramite WordPress), il commento di un lettore, un gadget o widget interattivo, o qualsiasi elemento con contenuto indipendente;
- <nav>: descrive la sezione del sito che contiene dei link ad altre pagine;
- <aside>: è utilizzato per rappresentare sezioni con contenuto relazionato a quello presente all’esterno di esso, ma che può essere considerato a parte. Il suo impiego principale è quello di definire delle barre laterali per contenere sondaggi, pubblicità o degli elementi di tipo <nav>;
- <hgroup>: rappresenta la testata di una sezione. E’ utilizzato per raggruppare elementi con tag h1 – h6 , quando la testata è composta da più livelli (come nome Capitolo, nome sottoCapitolo, ecc.);
- <header>: è utilizzato per definire la testata di una sezione e può contenere l’elemento <hgroup>;
- <footer>: rappresenta l’ultimo elemento all’interno di una sezione. E’ utilizzato per contenere l’autore di una sezione, link ad articoli correlati o dati di copyright;
- <time>: è un elemento per definire il tempo secondo il calendario Gregoriano.
Possiamo riassumere graficamente la struttura di un documento HTML5 con questa immagine:
Struttura di un documento HTML5
E la sua corrispondenza con un documento HTML in versione 4.01:
Struttura di un documento HTML4.01
COMMENTS