In questo articolo sarà spiegato il concetto di microdata e verrà illustrato come utilizzare questo nuovo standard introdotto da HTML5 al fine di migliorare l'aspetto semantico del web.
Dal punto di vista della semantica HTML5 ha introdotto anche altri nuovi tags quali article, nav, header, footer ecc..
Non trattandosi di tags,i microdata sono gruppi di coppie e valori che estendono il markup di HTML5.
Gruppi di microdati
Poter descrivere un oggetto con tutte le sue caratteristiche è chiaramente lo scopo di un gruppo, o item, di microdati.
Per creare un item è necessario utilizzare l'attributo HTML5 itemscope, che essendo abbinato uno specifico elemento HTML (di cui è attributo) segna il contesto, ed il confine, nel quale valgono le informazioni, o proprietà, aggiuntive.
Al fine di caratterizzare meglio il soggetto descritto è utile aggiungere all'item le proprietà che maggiormente gli donano significato: questo è possibile utilizzando l'attributo itemprop valorizzandolo con il nome della proprietà descritta.
Di seguito un esempio sull'utilizzo dei microdata per la descrizione di una persona.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<title>HTML5 microdata</title>
<meta name="author" content="Mirko Agrati" />
</head>
<body>
<div itemscope>
<p>
Benvenuti sul mio blog!
Mi chiamo <span itemprop="nome">Mirko</span>
<span itemprop="cognome">Agrati</span>, mi diverte
<span itemprop="hobby">pubblicare articoli tecnici</span>
su questo blog e <span itemprop="hobby">giocare a calcetto</span>
con gli amici.
I miei colori preferiti sono quelli della squadra di calcio che tifo:
<span itemprop="colore-pref squadra-pref">nero e azzurro</span>
</p>
</div>
</body>
Come è possibile notare tutte le proprietà sono contrassegnate dall'attributo itemprop e sono racchiuse all'interno del recinto tracciato dal DIV con attributo itemscope.
Sempre osservando l'esempio, è possibile assegnare alla stessa proprietà più di un valore che la descrive (es: hobby) ma anche assegnare contemporaneamente lo stesso valore a più proprietà (es: colore-pref e squadra-pref).
Definire il tipo di dato e fornirne il dizionario
Per definire al massimo il tipo di dato da rappresentare tramite microdata è possibile crearne la definizione in una pagina HTML separata e referenziarla all'occorrenza tramite l'attributo itemtype. Questo va utilizzato insieme all'attributo itemscope.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<title>HTML5 microdata</title>
<meta name="author" content="Mirko Agrati" />
</head>
<body>
<div itemscope itemtype="www.esempio-microdata.it/MA_Person">
<p>
Benvenuti sul mio blog!
.................
</p>
</div>
</body>
Per farsi un'idea riguardo la definizione di un tipo di dato è possibile dare uno sguardo alle tipologie che Google utilizza e che ha pubblicato all'indirizzo http://www.data-vocabulary.org/.
A questo indirizzo invece è possibile capire come Google utilizza le informazioni microdata per la creazione dei famosi rich snippets.
Alla prossima,
MA.
Buon Post!
RispondiElimina;)
AnSense from gossipolitikal.com