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:
