Recentemente tutte le discussioni si sono incentrate sull’HTML5, tuttavia vi sono una serie di elementi che vengono spesso sotto-utilizzati ma che permetterebbo di rendere il nostro codice più semantico, il nostro sito più usabile e più semplice da realizzare e da navigare. Andiamo a vederne 5!

1.Label

Descrizione

La label definisce l’etichetta di un campo input di una form. La caratteristica fondamentale di questo tag è quella di aumentare l’usabilità del nostro sito evidenziando i campi input associati ad essa.

Utilizzo

Il tag <label> dovrebbe essere collocato sempre in prossimità del campo input al quale viene associato e l’attributo indispensabile da dichiarare è il “for” al quale si associa, appunto, un input preciso.

<label for="nome">Tuo Nome</label>
<input type="text" id="nome" />

Stilizzazione

Per le spiegazioni tecnico-creative di come decorare le vostre form vi rimando ai seguenti link (in lingua inglese):

2 & 3. fieldset e legend

Descrizione

Il tag <fieldset> è usato per raggruppare in modo logico tutti gli elementi di una form. Tipicamente il tag <fieldset> disegna un box intorno a questi elementi per separarli dal resto. Il tag <legend> invece definisce un titolo per un fieldset specifico.

Utilizzo

I tag <fieldset> e <legend>possono e dovrebbero essere utilizzati in ogni form, infatti permettono di descrivere e dividere le forms in sezioni diverse.

<form>
<fieldset>
<legend>Dettagli Personali</legend>
<label for="nome">Nome</label>
<input type="text" id="nome" />
<label for="cognome">Cognome</label>
<input type="text" id="cognome" />
</fieldset>
</form>

Stilizzazione

Ci sono molti tutorial in merito, vi rimando a questi link per allenarvi

4. optgroup

Descrizione

Il tag <optgroup> è utilizzato per correlare un gruppo di opzioni di una select (menù a tendina). Questo tag semplifica la navigazione agli utenti nel caso di lunge liste di opzioni.

Utilizzo

Il tag <optgroup> semplicemente taglia le opzioni permettendo di inserire dei titoletti divisori (vedi immagine).

Stilizzazione

Come purtroppo accade per molti elementi delle form, la stilizzazione è piuttosto limitata e solo ora vicina a soddisfare gli standard di tutti i browser. L’esempio di default si presenta come nell’immagine qui sopra.

5. dl

Descrizione

Il tag <dl> rappresenta le liste di definizione.  Semplicemente il tag <dl> è usato insieme al tag <dt> che definisce l’oggetto nella lista e <dd> che lo descrive. Questo può risultare utile per molte cose, quali le liste dei dizionari, liste dei contatti e altro.

Utilizzo

Questo esempio mostra come usare una lista di definizione in una pagina di contatti.

<dl>
<dt>Email</dt>
<dd>email@domain.com</dd>
<dt>Località</dt>
<dd>Qui</dd>
<dt>Telefono</dt>
<dd>+0123456789</dd>
<dt>Skype</dt>
<dd>mionome</dd>
</dl>

Stilizzazione

Le liste di definizione sono molto flessibili e possono essere usate per molti scopi. Alcuni esempi li trovate in questo interessante articolo:

Liste di definizione – dimenticate o incomprese?