Se sei un amante delle nuove tecnologie, probabilmente avrai già avuto modo di incorporare alcune funzioni di HTML5 all’interno dei tuoi siti e delle tue applicazioni online.
Probabilmente avrai iniziato ad utilizzare i metodi semplificati di dichiarazione doctype e di codifica dei caratteri. Probabilmente avrai anche utilizzato la sintassi semplificata invece di utilizzare le dichiarazioni estese "type=text/javascript" o "type=text/css" nell’inserimento di script o css in pagina. E’ anche possibile che tu abbia già fatto uso o visto i nuovi elementi semantici <section>, <article>, <header>, <footer>, e <nav>.
In tutto questo però non ti starai scordando alcuni “tags minori”? HTML5 include un numero di nuovi elementi che probabilmente non avranno grande attenzione, così ho deciso di descrivere le funzionalità di questi ultimi. Presenterò anche alcune idee per utilizzarli nei progetti così che se ne possa vedere più chiaramente il valore reale!
L’elemento <hgroup>
L’elemento <hgroup> è un’interessante piccola pepita “caduta” dai più importanti tag <section> e <article>. Con l’introduzione di questi nuovi elementi strutturali, sezioni differenti di una pagina hanno la possibilità di essere considerate come “portatili/a sè stanti”, e le sezioni singole possono contenere ognuna un heading tag (tag di intestazione) principale (<h1>). Con HTML4 era considerato “good practise” usare un solo tag <h1>.
In questa nuova situazione si rivela utile l’utilizzo del tag <hgroup>. L’esempio più calzante per utilizzare correttamente questo tag è il caso in cui vogliate creare una correlazione reale tra <h1> e <h2>, in cui per esempio, l'<h2> è il sottotitolo dell'<h1> e non volete creare un <div class=”subtitle”> ad esempio. Un altro caso di utilizzo utile è quando volete associare dei metadata ad una sezione o articolo. In questo caso potete mettere l'<hgroup> all’interno del tag <header>.
Vediamo degli esempi di quanto appena detto:
<article>
<hgroup>
<h1>Titolo dell'articolo</h1>
<h2>Sottotitolo dell'articolo</h2>
</hgroup>
<p>Lorem Ipsum dolor set amet</p>
</article>oppure:
<article>
<header>
<hgroup>
<h1>Titolo dell'articolo</h1>
<h2>Sottotitolo dell'articolo</h2>
</hgroup>
<p><time datetime="2010-03-20">20 Marzo, 2010</time></p>
</header>
<p>Lorem Ipsum dolor set amet</p>
</article>L’elemento <aside>
L’elemento <aside> viene utilizzato solitamente per contenere elementi che non fanno parte del “contenuto” principale della pagina quali ad esempio, la sidebar in un blog. Sebbene il nome possa trarre in inganno, questo elemento non deve essere necessariamente essere utilizzato “aside” (di fianco) al contenuto. Potrebbe infatti trovarsi tranquillamente a metà paginà o in fondo.
<aside> dovrebbe essere usato per indicare una sezione “staccata” dal contenuto connessa per senso, logica ad esso ma non considerabile un vero e proprio “articolo” a sè stante. Potrebbe quindi essere utilizzato come Wiki-box, come descrizione di una breve biografia se si sta parlando di un autore, come un box, un’annotazione o anche una pubblicità semanticamente connessa al contenuto.
L’elemento <mark>
Per concludere vediamo il tag <mark>. Come dichiarato nelle specifiche il tag <mark> indica una parte del documento che è stata evidenziata a causa della sua rilevanza (in connessione all’attività attuale dell’utente). Questo risulta particolarmente interessante dal momento che “dipende” dal comportamento dell’utente.
L’uso primario dell’elemento <mark> è legato ai risultati di ricerca. Il tag <mark> dovrebbe infatti indicare, con abbellimenti stilistici o evidenziazioni, quali termini l’utente ha cercato evidenziandoli nei risultati di ricerca.
Un esempio di evidenziazione può essere visto visitando un blog che lo implementa e raggiungendolo per determinate parole chiave. Quelle da voi ricercate, con cui giungerete sul sito, saranno giustappunto evidenziate in tutta la pagina.
Per vedere un esempio reale in azione scrivete in Google “my marvellous co-author Remy Sharp”, cliccate sul primo risultato e scorrete la pagina. Troverete le parole cercate evidenziate in rosa.
Al momento non sembra vi siano utilità diversa da quella appena esposta, tuttavia potreste utilizzare questa area in modo creativo quando un utente arriva sul vostro sito tramite certe parole chiave. Libero sfogo dunque alla fantasia! Non trascuriamo nulla quindi, buona sperimentazione!
Articolo liberamente tradotto di “Don’t Forget About HTML5’s “Little Guys”
