Introduzione a HTML 5
Come già sapete, in HTML abbiamo una gamma di elementi per costruire la struttura del nostro sito web, piuttosto limitata. Abbiamo elementi per costruire listati, paragrafi, abbreviazioni, unioni, tavole, divisioni... Ma non abbiamo niente per strutturare notizie, storie o ricette per esempio.
Altri linguaggi di markup come XML, ci offrono la possibilità di creare tutti gli elementi di cui abbiamo bisogno. Cosi ché se abbiamo bisogno di un elemento ricetta, dobbiamo solo crearlo. L'unico problema è che dovremo anche creare un parser che sappia quello che significa l'elemento ricetta. In HTML abbiamo una serie limitata di elementi a nostra disposizione. Questi elementi sono implementati nei browser che sanno interpretarli. Se potessimo creare i nostri propri elementi, sarebbe un caos assoluto.
HTML è provvisto di un meccanismo che facilita ai web designer d'aggiungere più livelli di semantica attraverso l'attributo class che ci permette di etichettare istanze specifiche di un elemento come un tipo o classe speciale di quel elemento. I browser non capiscono quello che aggiungiamo nell'attributo class e quindi la cosa non incide minimante nel rendering della pagina. Effettivamente, le classi non solo servono per il CSS e per il JavaScript, se le classi seguono una convenzione adeguata nei loro nomi, possono essere usate per più cose
Microformati
I microformati sono un pacchetto di convenzioni stipulate dalla comunità. Questi microformati utilizzano l'attributo class di HTML per colmare alcune delle sue lacune più evidenti:
* hCard per i dettagli dei contatti
* hCalendar per eventi
* hAtom per notizie e simili
* ...
Poiché esiste un consenso nella comunità su che nome di classi usare, ora esistono parser ed estensioni per i browser che sono in grado di lavorare con questi specifici modelli. Per saperne di più si può dare un'occhiata al loro wiki.
I microformati non pretendono di risolvere ogni caso possibile di utilizzo. Sono progettati con la filosofia di coprire l'ottanta percento dei casi usando il venti percento dello sforzo (questo è conosciuto come la formula 80/20). Alcuni sviluppatori sostengono che HTML deve essere infinitamente estensibile dato che la formula 80/20 non è sufficiente e si dovrebbe fornire una soluzione in tutti i casi e non solo nella maggioranza di essi.
Esistono tecnologie come RDFa che è un insieme di estensioni proposte da W3C per introdurre più semantica nei documenti HTML e che utilizza namespaces rendendo possibile l'introduzione di un’infinità di formati:
....
Il fatto di usare namespaces ha avviato un intenso dibattito nella comunità dato che alcune persone pensano che l'uso di namespaces porterà con sé una possibile destandardizzazione ed aggiunge un livello di complessità del tutto inutile potendo utilizzare le classi per questo.
Mark
HTML5 introduce una nuova serie di elementi in linea solo che ora non vengono chiamati elementi in linea, bensì text-level semantics o semantica a livello di testo nella lingua dell'impero. Uno di essi è l'etichetta mark.
Quando realizziamo una ricerca in certi siti, gli elementi incontrati nella pagina appaiono evidenziati per facilitare la loro localizzazione. Questo è stato fatto con etichette span con una sorta di classe che produce l'effetto desiderato, ed è corretto, ma non è semantico. Possiamo utilizzare em o strong ma nemmeno questo sarebbe molto semantico perché non vogliamo aggiungere importanza né enfasi alla parola cercata, solo vogliamo contrassegnarla in qualche modo.
È lì dove entra in scena la nuova etichetta mark:
Questi sono i risultati della sua ricerca: disegnatores...
JL Design: disegno web profesional
Non abbiamo dato nessuna rilevanza alla parola, solo l'abbiamo contrassegnata.
Time
Uno dei più popolari microformati è hCalendar perché risolve un problema molto comune; permettere agli utenti di aggiungere eventi ai propri calendari. L'unico problema con hCalendar è che serve per descrivere date ed ore in modo tale da essere compreso da una macchina. Tuttavia, gli umani hanno la brutta abitudine di descrivere le date con cose come 17 luglio del 2011
o la prossima domenica ma il parser si aspetta di ricevere una data in formato ISO: YYYY-mm-DDThh:mm:ss ad esempio.
La comunità per questo ha sviluppato alcuni soluzioni eleganti come per esempio quella di usare l'etichetta abbr:
17 gennaio del 2011
In HTML5 questo problema lo risolviamo con la nuova etichetta time:
17 gennaio del 2011
L'elemento time può essere usato per date, ore o una combinazione di entrambe:
9pm>
12 settembre del 2011>
12 settembre del 2011 alle 1:30pm,
Meter
L'elemento meter può essere usato per marcare misure definendo che tali misure fanno parte di una scala con valori massimi e minimi. Esistono attributi come min, high, low ed optimum per regolare la cosa. É anche possibile occultare il valore attuale:
Quello che vuoi è che una tigre mi mangi è che una tigre mi mangi...
Progress
Mentre meter va bene per descrivere qualcosa che è già stato definito, l'elemento progress ci permette di evidenziare un valore che sia in processo di modifica:
Il tuo profilo è al 70% completato, aggiunge una foto al tuo profilo.
Ovviamente si può utilizzare una API JavaScript per modificare i valori al volo:
Progress: 20%
Elementi strutturali
Per molti anni, abbiamo utilizzato div con classi specifiche per definire —da regola generale— un header, un footer, navs ed altre entità molto comuni allo sviluppo di qualunque sito web.
Si sperava che un giorno, tutte queste entità facessero parte del linguaggio e quel giorno è oggi, grazie alla nuove specifiche del linguaggio HTML5.
Section
Il nuovo elemento section ha come compito quello di raggruppare elementi relazionati tra loro in forma tematica. È molto simile all'uso che è dato all'elemento div ma con la differenza che l'elemento div, non ha nessun peso semantico e non c'informa sul tipo di contenuto che ospita. L'elemento section si usa in forma esplicita per raggruppare un contenuto relazionato.
La regola per sapere quando usare il nuovo elemento section è semplice, basta solo farsi questa domanda, "tutto il contenuto che viene incluso è relazionato tra sé?:
L’elemento section si usa per raggruppare contenuti relazionati fra loro.
Può essere usato come un sostituto al elemento div in certe circostanze
Header
Secondo la nuova specifica, "L'elemento header rappresenta un gruppo di aiuti d’introduzione o di navigazione." Esiste una differenza chiave tra l'elemento header e l'uso abituale del termine header o testata, utilizzato comunemente per situare gli elementi d’intestazione di un sito web.
Una pagina web deve definire una header principale dove normalmente andrà il logo o il nome del sito e sicuramente un menù di navigazione, ma inoltre può —e deve— definire altri elementi header all’interno degli elementi section. La specifica descrive l'elemento section, come "un raggruppamento tematico di contenuti solitamente con un intestazione" o cose analoghe, con un header:
Quando Frodo Baggins delle pipe vide la lontana carovana di Sandal il Bigio...
...
E così fu come i nostri eroi abbandonarono le baracche.
Così, l'elemento header appare normalmente come regola generale all'inizio di un documento o section ma realmente non ha un perché. Si definisce più per il suo contenuto che per la sua posizione. Quest’ultimo induce all'errore alcuni designer poco pratici con la nuova specifica.
Footer
Come succede con l'elemento header, l'elemento footer pare come se indicasse la sua posizione ma come con header, quello che definisce è il suo contenuto. L'elemento footer deve aver incluse le informazioni del suo elemento contenitore: chi l'ha scritto, informazioni di proprietà intellettuale, link, ecc.
Di base è lo stesso uso astratto che tutti gli sviluppatori e sviluppatrici web abbiamo in mente quando pensiamo ad un footer, solo che ampliato al contesto che ogni section può contenere uno:
Quando Frodo Baggins delle pipe vide da lontano il calesse di Sandal il Bigio...
...
E così fu come i nostri eroi abbandonarono la baracca.
Di J.R.R. Torke Mada
Aside
Come succede con altri elementi della nuova specifica, quando parliamo dell'elemento aside o di un sidebar non stiamo riferendoci ad elementi che appaiono alla sinistra o la destra del contenuto principale, ma a ciò che contiene ed è quello che importa e non la sua posizione.
L'elemento aside si deve utilizzare per raggruppare contenuti riferiti tangenzialmente nel contesto e che la loro relazione col contenuto principale non è riferita direttamente se non in forma laterale. Se ci sono contenuti che consideriamo devono essere separati del contenuto principale, allora, dobbiamo utilizzare per loro un elemento aside.
Una regola semplice per sapere quando può essere necessario utilizzare un elemento aside è quando la risposta alla domanda: “se si elimina il contenuto che raggruppa l'elemento aside, si diminuisce il significato del contenuto principale?” è negativa.
Solo perché il design di un contenuto dica che visivamente deve vedersi ad un lato del contenuto principale, non significa che debba essere racchiuso dentro un elemento aside. È comune ubicare informazioni sull'autore del contenuto —ad esempio— nella sidebar. Ma semanticamente, quel tipo di contenuto deve essere rinchiuso in un elemento footer, di fatto la specifica menziona in modo esplicito che tipi di contenuto come, informazioni sull'autore e simili, devono essere incorniciati dentro un'etichetta footer.
Nel novanta percento delle volte, un header si posizionerà all’inizio di una sezione, un footer alla fine ed un aside ad un lato, ma ricordare che questi elementi non sono stati creati per dare senso ad un layout bensì per aumentare la semantica della strutturazione dei nostri documenti. Per i layout si usa sempre CSS che esiste per questo.
Nav
L'elemento nav contiene informazioni sulla navigazione per il sito web, solitamente una lista di collegamenti con l'attributo display inline. Questo elemento deve essere utilizzato solo per la navigazione principale del sito e non ad esempio per collegamenti esterni.
Normalmente l'elemento nav appare dentro un elemento header. Questo dà senso all'affermazione della specifica sull'elemento header quando dice questo: "gruppo di aiuti d’introduzione o di navigazione."
Article
L'elemento article è come una specializzazione dell'elemento section. Deve usarsi per definire contenuto autonomo ed indipendente, con previsione di essere riutilizzato in modo isolato. Il trucco, sta nel decidere cosa significa "autonomo."
Se il nostro contenuto può essere ridistribuito in RSS o in Atom feed e continua a mantenere integro il suo significato, allora, probabilmente l'elemento article è il contenitore appropriato da utilizzare nel nostro documento. Di fatto, l'elemento article è specialmente indicato per la distribuzione di contenuti.
Se ricordate i punti anteriori, possiamo utilizzare l'elemento article assieme all'elemento time e all'attributo pubdate, per indicare che il contenuto ha inclusa una data di pubblicazione:
Quando i piccoli "jobits" partirono per la terra di Bayor (Ximo Bayor) con il loro
amico il Legolas...
Pubblicato Il 03 luglio del 2011 alle 12:16;
por J.R.R. Torke Mada
Se c’è più di un elemento time in un articolo, solamente ad uno di essi si può aggiungere l'attributo pubdate. L'elemento article è specialmente utile per post nei blog, notizie stampa digitali, commenti e post nei forum. Copre esattamente gli stessi casi che il microformato hAtom.
La specifica HTML5 aggiunge inoltre che l'elemento article deve essere usato per widgets autonomi come; calcolatrici, orologi, inserti del clima e cose simili. Questo trasforma all'elemento in qualcosa di abbastanza confuso e poco intuitivo. Come sempre bisogna analizzare se il contenuto di un widget è autonomo, indipendente e può essere riutilizzabile e perfino distribuito.
Chiarimento:
Quello che più preoccupa è che gli elementi article e section sono molto simili. L’unica cosa che li differenzia è la parola "autonomo." Decidere quale usare dipende in molti casi dell'interpretazione che faccia il progettista o web designer e la cosa migliore è utilizzare il buonsenso ed adoperare quello che in un certo contesto, ci sembri il più semantico.
Modelli di Contenuto
Nelle versioni anteriori della specifica, gli elementi si dividevano in due categorie: inline e block. Nella nuova specifica del linguaggio, si usa una gerarchia molto più ampia suddividendole in un numero maggiore di categorie.
Ora gli elementi inline hanno un modello di contenuto chiamato "text-level semantics" o semantica a livello di testo nella lingua dell'impero. Molti dei vecchi elementi block, si trovano ora sotto la denominazione di "grouping content" o contenuti di raggruppamento. Quali sono le liste, i div ed i paragrafi fra gl’altri.
I formulari contano con il loro proprio modello di contenuti. Gli elementi img, audio, video e canvas appartengono alla categoria "embedded content" o contenuto incorporato.
I nuovi elementi strutturali formano un nuovo modello di contenuto denominato "sectioning content" o contenuto di sezione.
Sessione di Contenuti
Possiamo definire un schema di documento HTML utilizzando gli elementi h1 a h6:
Editori
Leggere tutti i capitoli di questi manuali.
Adrian Lopez
Appassionato di tecnologia lavora a Lima...
Jorge Caula
Ingegnere Tecnico Informatico di sistemi per la...
Juan Llul
Ha 33 anni e vive nella città di Algeciras Cádiz...
Gli editori sono tutti degli geek da 15 punti
Questo genera il seguente schema:
Dev Engadget
|_ Editori
|_ Adrián Lopez
|_ Jorge Caula
|_ Juan Llul
Questo funziona bene, ogni contenuto che appare dopo un elemento hX è associato a detto elemento. Ma, che cosa succede con l'elemento small?. Deve essere associato a tutto il documento, ma il navigatore non ha forma di sapere ciò. Non esiste un modo per definire che l'elemento small deve associarsi al documento completo e non all'intestato "Juan Llul."
La nuova sezione di contenuti di HTML5 c'offre la possibilità esplicita di segnare dove incomincia e dove finisce un contenuto specifico:
Editori
Leggere tutti i capitoli di questi manuali.
Adrian Lopez
Appassionato di tecnologia lavora a Madrid...
Jorge Caula
Ingegnere Tecnico Informatico di sistemi per la...
Juan Llul
Ha 33 anni e vive nella città di Algeciras Cádiz...
Gli editori sono tutti degli geek da 15 punti
Ora è chiaro che l'elemento small appartiene all'intestazione "Introduzione" a HTML 5 e non a "Juan Llul." Possiamo essere molto più semantici se vogliamo:
Editori
Leggere tutti i capitoli di questi manuali.
Adrian Lopez
Appassionato di tecnologia lavora a Madrid...
Jorge Caula
Ingegnere Tecnico Informatico di sistemi per la...
Juan Llul
Ha 33 anni e vive nella città di Algeciras Cádiz...
Gli editori sono tutti degli geek da 15 punti
Come si può apprezzare, la sezione dei contenuti c'offre molte più possibilità di quanto non era mai stato possibile prima in HTML. Inoltre in HTML5 ogni pezzo di sezione di contenuto, dispone del suo proprio schema autonomo il che significa che possiamo utilizzare sempre un intestazione di tipo h1 senza preoccuparci in che livello d’intestazione si trovi:
Leggere tutti i capitoli di questi manuali.
Appassionato di tecnologia lavora a Madrid...
Ingegnere Tecnico Informatico di sistemi per la...
Ha 33 anni e vive nella città di Algeciras Cádiz...
Gli editori sono tutti degli geek da 15 punti
In versioni anteriori della specifica questo avrebbe prodotto un schema di documento HTML impreciso:
Introduzione a HTML 5
Editore
Adrián Lopez
Jorge Caula
Juan Llul
tuttavia in HTML5 lo schema è completamente accurato:
|_ Editori
|_ Adrián Lopez
|_ Jorge Caula
|_ Juan Llul
hgroup
In alcune occasioni vorremo utilizzare un elemento di intitolazione o intestazione ma non vorremo che alteri lo schema del documento. Per ciò possiamo usare l'elemento hgroup che serve precisamente per quello:
Passione per il Web Design
In questo caso h2 è uno slogan del primo h1 e non si tiene in conto per lo schema del documento. Dentro un elemento hgroup, solo la prima intestazione contribuisce a costruire lo schema del documento e non c’è motivo che sia necessariamente un h1, può essere un qualsiasi altro livello.
Gli elementi fieldset, blockquote e td non sono tenuti per niente in considerazione nell'algoritmo di schematizzazione del documento. Per ciò, questi elementi sono chiamato "sectioning roots" e si può dire che sono invisibili o innocui allo schema del documento.
I cambiamenti introdotti dalla specifica del nuovo linguaggio forniscono ai progettisti e web designer di un potente mezzo col che iniziare la redazione di documenti web più logici e semantici. Sta nelle nostre mani l'utilizzare questi mezzi in modo intelligente per creare contenuti di qualità e migliorare il modo di scrivere e comprendere il web.
Altri linguaggi di markup come XML, ci offrono la possibilità di creare tutti gli elementi di cui abbiamo bisogno. Cosi ché se abbiamo bisogno di un elemento ricetta, dobbiamo solo crearlo. L'unico problema è che dovremo anche creare un parser che sappia quello che significa l'elemento ricetta. In HTML abbiamo una serie limitata di elementi a nostra disposizione. Questi elementi sono implementati nei browser che sanno interpretarli. Se potessimo creare i nostri propri elementi, sarebbe un caos assoluto.
HTML è provvisto di un meccanismo che facilita ai web designer d'aggiungere più livelli di semantica attraverso l'attributo class che ci permette di etichettare istanze specifiche di un elemento come un tipo o classe speciale di quel elemento. I browser non capiscono quello che aggiungiamo nell'attributo class e quindi la cosa non incide minimante nel rendering della pagina. Effettivamente, le classi non solo servono per il CSS e per il JavaScript, se le classi seguono una convenzione adeguata nei loro nomi, possono essere usate per più cose
Microformati
I microformati sono un pacchetto di convenzioni stipulate dalla comunità. Questi microformati utilizzano l'attributo class di HTML per colmare alcune delle sue lacune più evidenti:
* hCard per i dettagli dei contatti
* hCalendar per eventi
* hAtom per notizie e simili
* ...
Poiché esiste un consenso nella comunità su che nome di classi usare, ora esistono parser ed estensioni per i browser che sono in grado di lavorare con questi specifici modelli. Per saperne di più si può dare un'occhiata al loro wiki.
I microformati non pretendono di risolvere ogni caso possibile di utilizzo. Sono progettati con la filosofia di coprire l'ottanta percento dei casi usando il venti percento dello sforzo (questo è conosciuto come la formula 80/20). Alcuni sviluppatori sostengono che HTML deve essere infinitamente estensibile dato che la formula 80/20 non è sufficiente e si dovrebbe fornire una soluzione in tutti i casi e non solo nella maggioranza di essi.
Esistono tecnologie come RDFa che è un insieme di estensioni proposte da W3C per introdurre più semantica nei documenti HTML e che utilizza namespaces rendendo possibile l'introduzione di un’infinità di formati:
....
Il fatto di usare namespaces ha avviato un intenso dibattito nella comunità dato che alcune persone pensano che l'uso di namespaces porterà con sé una possibile destandardizzazione ed aggiunge un livello di complessità del tutto inutile potendo utilizzare le classi per questo.
Mark
HTML5 introduce una nuova serie di elementi in linea solo che ora non vengono chiamati elementi in linea, bensì text-level semantics o semantica a livello di testo nella lingua dell'impero. Uno di essi è l'etichetta mark.
Quando realizziamo una ricerca in certi siti, gli elementi incontrati nella pagina appaiono evidenziati per facilitare la loro localizzazione. Questo è stato fatto con etichette span con una sorta di classe che produce l'effetto desiderato, ed è corretto, ma non è semantico. Possiamo utilizzare em o strong ma nemmeno questo sarebbe molto semantico perché non vogliamo aggiungere importanza né enfasi alla parola cercata, solo vogliamo contrassegnarla in qualche modo.
È lì dove entra in scena la nuova etichetta mark:
Questi sono i risultati della sua ricerca: disegnatores...
JL Design: disegno web profesional
Non abbiamo dato nessuna rilevanza alla parola, solo l'abbiamo contrassegnata.
Time
Uno dei più popolari microformati è hCalendar perché risolve un problema molto comune; permettere agli utenti di aggiungere eventi ai propri calendari. L'unico problema con hCalendar è che serve per descrivere date ed ore in modo tale da essere compreso da una macchina. Tuttavia, gli umani hanno la brutta abitudine di descrivere le date con cose come 17 luglio del 2011
o la prossima domenica ma il parser si aspetta di ricevere una data in formato ISO: YYYY-mm-DDThh:mm:ss ad esempio.
La comunità per questo ha sviluppato alcuni soluzioni eleganti come per esempio quella di usare l'etichetta abbr:
17 gennaio del 2011
In HTML5 questo problema lo risolviamo con la nuova etichetta time:
17 gennaio del 2011
L'elemento time può essere usato per date, ore o una combinazione di entrambe:
9pm>
12 settembre del 2011>
12 settembre del 2011 alle 1:30pm,
Meter
L'elemento meter può essere usato per marcare misure definendo che tali misure fanno parte di una scala con valori massimi e minimi. Esistono attributi come min, high, low ed optimum per regolare la cosa. É anche possibile occultare il valore attuale:
Quello che vuoi è che una tigre mi mangi è che una tigre mi mangi...
Progress
Mentre meter va bene per descrivere qualcosa che è già stato definito, l'elemento progress ci permette di evidenziare un valore che sia in processo di modifica:
Il tuo profilo è al 70% completato, aggiunge una foto al tuo profilo.
Ovviamente si può utilizzare una API JavaScript per modificare i valori al volo:
Progress: 20%
Elementi strutturali
Per molti anni, abbiamo utilizzato div con classi specifiche per definire —da regola generale— un header, un footer, navs ed altre entità molto comuni allo sviluppo di qualunque sito web.
Si sperava che un giorno, tutte queste entità facessero parte del linguaggio e quel giorno è oggi, grazie alla nuove specifiche del linguaggio HTML5.
Section
Il nuovo elemento section ha come compito quello di raggruppare elementi relazionati tra loro in forma tematica. È molto simile all'uso che è dato all'elemento div ma con la differenza che l'elemento div, non ha nessun peso semantico e non c'informa sul tipo di contenuto che ospita. L'elemento section si usa in forma esplicita per raggruppare un contenuto relazionato.
La regola per sapere quando usare il nuovo elemento section è semplice, basta solo farsi questa domanda, "tutto il contenuto che viene incluso è relazionato tra sé?:
L’elemento section si usa per raggruppare contenuti relazionati fra loro.
Può essere usato come un sostituto al elemento div in certe circostanze
Header
Secondo la nuova specifica, "L'elemento header rappresenta un gruppo di aiuti d’introduzione o di navigazione." Esiste una differenza chiave tra l'elemento header e l'uso abituale del termine header o testata, utilizzato comunemente per situare gli elementi d’intestazione di un sito web.
Una pagina web deve definire una header principale dove normalmente andrà il logo o il nome del sito e sicuramente un menù di navigazione, ma inoltre può —e deve— definire altri elementi header all’interno degli elementi section. La specifica descrive l'elemento section, come "un raggruppamento tematico di contenuti solitamente con un intestazione" o cose analoghe, con un header:
Quando Frodo Baggins delle pipe vide la lontana carovana di Sandal il Bigio...
...
E così fu come i nostri eroi abbandonarono le baracche.
Così, l'elemento header appare normalmente come regola generale all'inizio di un documento o section ma realmente non ha un perché. Si definisce più per il suo contenuto che per la sua posizione. Quest’ultimo induce all'errore alcuni designer poco pratici con la nuova specifica.
Footer
Come succede con l'elemento header, l'elemento footer pare come se indicasse la sua posizione ma come con header, quello che definisce è il suo contenuto. L'elemento footer deve aver incluse le informazioni del suo elemento contenitore: chi l'ha scritto, informazioni di proprietà intellettuale, link, ecc.
Di base è lo stesso uso astratto che tutti gli sviluppatori e sviluppatrici web abbiamo in mente quando pensiamo ad un footer, solo che ampliato al contesto che ogni section può contenere uno:
Quando Frodo Baggins delle pipe vide da lontano il calesse di Sandal il Bigio...
...
E così fu come i nostri eroi abbandonarono la baracca.
Di J.R.R. Torke Mada
Aside
Come succede con altri elementi della nuova specifica, quando parliamo dell'elemento aside o di un sidebar non stiamo riferendoci ad elementi che appaiono alla sinistra o la destra del contenuto principale, ma a ciò che contiene ed è quello che importa e non la sua posizione.
L'elemento aside si deve utilizzare per raggruppare contenuti riferiti tangenzialmente nel contesto e che la loro relazione col contenuto principale non è riferita direttamente se non in forma laterale. Se ci sono contenuti che consideriamo devono essere separati del contenuto principale, allora, dobbiamo utilizzare per loro un elemento aside.
Una regola semplice per sapere quando può essere necessario utilizzare un elemento aside è quando la risposta alla domanda: “se si elimina il contenuto che raggruppa l'elemento aside, si diminuisce il significato del contenuto principale?” è negativa.
Solo perché il design di un contenuto dica che visivamente deve vedersi ad un lato del contenuto principale, non significa che debba essere racchiuso dentro un elemento aside. È comune ubicare informazioni sull'autore del contenuto —ad esempio— nella sidebar. Ma semanticamente, quel tipo di contenuto deve essere rinchiuso in un elemento footer, di fatto la specifica menziona in modo esplicito che tipi di contenuto come, informazioni sull'autore e simili, devono essere incorniciati dentro un'etichetta footer.
Nel novanta percento delle volte, un header si posizionerà all’inizio di una sezione, un footer alla fine ed un aside ad un lato, ma ricordare che questi elementi non sono stati creati per dare senso ad un layout bensì per aumentare la semantica della strutturazione dei nostri documenti. Per i layout si usa sempre CSS che esiste per questo.
Nav
L'elemento nav contiene informazioni sulla navigazione per il sito web, solitamente una lista di collegamenti con l'attributo display inline. Questo elemento deve essere utilizzato solo per la navigazione principale del sito e non ad esempio per collegamenti esterni.
Normalmente l'elemento nav appare dentro un elemento header. Questo dà senso all'affermazione della specifica sull'elemento header quando dice questo: "gruppo di aiuti d’introduzione o di navigazione."
Article
L'elemento article è come una specializzazione dell'elemento section. Deve usarsi per definire contenuto autonomo ed indipendente, con previsione di essere riutilizzato in modo isolato. Il trucco, sta nel decidere cosa significa "autonomo."
Se il nostro contenuto può essere ridistribuito in RSS o in Atom feed e continua a mantenere integro il suo significato, allora, probabilmente l'elemento article è il contenitore appropriato da utilizzare nel nostro documento. Di fatto, l'elemento article è specialmente indicato per la distribuzione di contenuti.
Se ricordate i punti anteriori, possiamo utilizzare l'elemento article assieme all'elemento time e all'attributo pubdate, per indicare che il contenuto ha inclusa una data di pubblicazione:
Quando i piccoli "jobits" partirono per la terra di Bayor (Ximo Bayor) con il loro
amico il Legolas...
Pubblicato Il 03 luglio del 2011 alle 12:16;
por J.R.R. Torke Mada
Se c’è più di un elemento time in un articolo, solamente ad uno di essi si può aggiungere l'attributo pubdate. L'elemento article è specialmente utile per post nei blog, notizie stampa digitali, commenti e post nei forum. Copre esattamente gli stessi casi che il microformato hAtom.
La specifica HTML5 aggiunge inoltre che l'elemento article deve essere usato per widgets autonomi come; calcolatrici, orologi, inserti del clima e cose simili. Questo trasforma all'elemento in qualcosa di abbastanza confuso e poco intuitivo. Come sempre bisogna analizzare se il contenuto di un widget è autonomo, indipendente e può essere riutilizzabile e perfino distribuito.
Chiarimento:
Quello che più preoccupa è che gli elementi article e section sono molto simili. L’unica cosa che li differenzia è la parola "autonomo." Decidere quale usare dipende in molti casi dell'interpretazione che faccia il progettista o web designer e la cosa migliore è utilizzare il buonsenso ed adoperare quello che in un certo contesto, ci sembri il più semantico.
Modelli di Contenuto
Nelle versioni anteriori della specifica, gli elementi si dividevano in due categorie: inline e block. Nella nuova specifica del linguaggio, si usa una gerarchia molto più ampia suddividendole in un numero maggiore di categorie.
Ora gli elementi inline hanno un modello di contenuto chiamato "text-level semantics" o semantica a livello di testo nella lingua dell'impero. Molti dei vecchi elementi block, si trovano ora sotto la denominazione di "grouping content" o contenuti di raggruppamento. Quali sono le liste, i div ed i paragrafi fra gl’altri.
I formulari contano con il loro proprio modello di contenuti. Gli elementi img, audio, video e canvas appartengono alla categoria "embedded content" o contenuto incorporato.
I nuovi elementi strutturali formano un nuovo modello di contenuto denominato "sectioning content" o contenuto di sezione.
Sessione di Contenuti
Possiamo definire un schema di documento HTML utilizzando gli elementi h1 a h6:
Editori
Leggere tutti i capitoli di questi manuali.
Adrian Lopez
Appassionato di tecnologia lavora a Lima...
Jorge Caula
Ingegnere Tecnico Informatico di sistemi per la...
Juan Llul
Ha 33 anni e vive nella città di Algeciras Cádiz...
Gli editori sono tutti degli geek da 15 punti
Questo genera il seguente schema:
Dev Engadget
|_ Editori
|_ Adrián Lopez
|_ Jorge Caula
|_ Juan Llul
Questo funziona bene, ogni contenuto che appare dopo un elemento hX è associato a detto elemento. Ma, che cosa succede con l'elemento small?. Deve essere associato a tutto il documento, ma il navigatore non ha forma di sapere ciò. Non esiste un modo per definire che l'elemento small deve associarsi al documento completo e non all'intestato "Juan Llul."
La nuova sezione di contenuti di HTML5 c'offre la possibilità esplicita di segnare dove incomincia e dove finisce un contenuto specifico:
Editori
Leggere tutti i capitoli di questi manuali.
Adrian Lopez
Appassionato di tecnologia lavora a Madrid...
Jorge Caula
Ingegnere Tecnico Informatico di sistemi per la...
Juan Llul
Ha 33 anni e vive nella città di Algeciras Cádiz...
Gli editori sono tutti degli geek da 15 punti
Ora è chiaro che l'elemento small appartiene all'intestazione "Introduzione" a HTML 5 e non a "Juan Llul." Possiamo essere molto più semantici se vogliamo:
Editori
Leggere tutti i capitoli di questi manuali.
Adrian Lopez
Appassionato di tecnologia lavora a Madrid...
Jorge Caula
Ingegnere Tecnico Informatico di sistemi per la...
Juan Llul
Ha 33 anni e vive nella città di Algeciras Cádiz...
Gli editori sono tutti degli geek da 15 punti
Come si può apprezzare, la sezione dei contenuti c'offre molte più possibilità di quanto non era mai stato possibile prima in HTML. Inoltre in HTML5 ogni pezzo di sezione di contenuto, dispone del suo proprio schema autonomo il che significa che possiamo utilizzare sempre un intestazione di tipo h1 senza preoccuparci in che livello d’intestazione si trovi:
Leggere tutti i capitoli di questi manuali.
Appassionato di tecnologia lavora a Madrid...
Ingegnere Tecnico Informatico di sistemi per la...
Ha 33 anni e vive nella città di Algeciras Cádiz...
Gli editori sono tutti degli geek da 15 punti
In versioni anteriori della specifica questo avrebbe prodotto un schema di documento HTML impreciso:
Introduzione a HTML 5
Editore
Adrián Lopez
Jorge Caula
Juan Llul
tuttavia in HTML5 lo schema è completamente accurato:
|_ Editori
|_ Adrián Lopez
|_ Jorge Caula
|_ Juan Llul
hgroup
In alcune occasioni vorremo utilizzare un elemento di intitolazione o intestazione ma non vorremo che alteri lo schema del documento. Per ciò possiamo usare l'elemento hgroup che serve precisamente per quello:
Passione per il Web Design
In questo caso h2 è uno slogan del primo h1 e non si tiene in conto per lo schema del documento. Dentro un elemento hgroup, solo la prima intestazione contribuisce a costruire lo schema del documento e non c’è motivo che sia necessariamente un h1, può essere un qualsiasi altro livello.
Gli elementi fieldset, blockquote e td non sono tenuti per niente in considerazione nell'algoritmo di schematizzazione del documento. Per ciò, questi elementi sono chiamato "sectioning roots" e si può dire che sono invisibili o innocui allo schema del documento.
I cambiamenti introdotti dalla specifica del nuovo linguaggio forniscono ai progettisti e web designer di un potente mezzo col che iniziare la redazione di documenti web più logici e semantici. Sta nelle nostre mani l'utilizzare questi mezzi in modo intelligente per creare contenuti di qualità e migliorare il modo di scrivere e comprendere il web.
