Alcuni Tag HTML5 che potrebbero servire

Ad un certo punto potremmo aver bisogno di esprimere una misura su una pagina web. Potrebbe essere qualsiasi cosa, per esempio, dal risultato di un esame per l’utilizzo del disco. HTML5 ha introdotto un nuovo elemento chiamato <meter> che rappresenta una misura scalare in un intervallo noto, o un valore frazionario.

Sulla base delle definizioni di questo elemento nella specifica, <meter> non è buono per misurare qualcosa come una temperatura esterna – perché non ha un intervallo fisso (si può definire, è ma è arbitrario). Questo elemento ha diversi attributi. I più comuni sono: value, min, e max. Il primo è utilizzato per indicare la misura, mentre gli altri due sono utilizzati per specificare l’intervallo. Quindi, se si vuole indicare che un hard disk di 500 GB ha occupato 300Gb, si può scrivere:

Da tempo immemorabile, gli sviluppatori hanno creato dei widget per informare agli utenti dello stato di avanzamento di un download o di un’attività. Oggi c’è un tag HTML5 nativo per questo evento chiamato <progress>. Esso ha due attributi: value (per specificare lo stato dei progressi) e max (per indicare il valore massimo raggiungibile). Se il valore max non è impostato, si presumerà un intervallo da 0 a 1 e value può essere qualsiasi float all’interno di questo intervallo. Quindi, per mostrare una barra di avanzamento per un’attività completata al 50% si può scrivere:

O l’equivalente:

Il testo all’interno dell’elemento viene utilizzato come ripiego per i browser più vecchi. Generalmente, questo elemento non dovrebbe essere utilizzato staticamente, ma piuttosto in combinazione con JavaScript o animazioni CSS per indicare l’avanzamento continuo.

Durante la scrittura, spesso ci troviamo citando un libro, un articolo, o una persona. Sulla carta usiamo solitamente doppi apici (“…”) per delimitare la porzione di citazione, insieme con le preposizioni da o per specificare chi stiamo citando o da quale fonte proviene.

In HTML5 abbiamo <q> per specificare la citazione, e <cite> per l’origine. Si noti che fino a poco tempo <cite> poteva essere utilizzato solo per indicare titolo del lavoro (libro, articolo, film, ecc) e non una persona. Tuttavia, questo è stato aggiornato in modo che possiamo utilizzare per ‘citare‘ anche le persone. Il tag <q> ha un attributo chiamato cite che ci permette di indicare il link della fonte nella citazione.

Ora, per fare un esempio, diciamo che vogliamo citare una celebre citazione di Ezra Pound (la mia citazione preferita). Usando HTML, scriveremo:

L’elemento <pre> ci permette di mostrare il testo preformattato così come appare nella fonte. Ciò significa che i caratteri di spaziatura non saranno diminuirti nel testo (cambiando il modo di default che i browser gestiscono gli spazi bianchi). Questo tag è ideale quando è necessario mostrare un frammento di codice, perché aiuta a preservare il rientro. Ad esempio, in una pagina si può avere qualcosa di simile a questo:

Se si scrive contenuto di tecnologia, si potrebbe spesso discutere di strumenti e tecniche che richiedono l’utilizzo di comandi da terminale o dalla shell. Quindi, è probabile che vogliamo mostrare il risultato di questi comandi. Questa situazione è la soluzione perfetta per <kbd> e <samp>. La prima rappresenta un input dell’utente come, ma non limitato a input da tastiera. Quest’ultimo rappresenta un esempio di output di un programma o di un sistema informatico. Questi elementi funziona bene con l’elemento <pre> precedentemente presentato. Un esempio dell’uso di questi elementi, simile a un esempio utilizzato nelle specifiche, è il seguente:

Prima di HTML5, l’elemento <small> serviva solo per presentazione, usato per scrivere parole utilizzando un carattere più piccolo. In HTML5 <small> ha qualche valore semantico. Ora l’elemento <small> rappresenta il testo trovato spesso in piccoli come disclaimer, avvertimenti, restrizioni legali, o copyright. Di seguito si riporta un esempio del suo uso:

Il tag <output> rappresenta il risultato di un calcolo. Il suo attributo principale è <for>, che contiene un elenco di ID separati da spazi degli elementi che vanno calcolati, o che comunque ha influenziano il calcolo. Questo elemento è esattamente quello che vi serve se avete un sito web che offre qualcosa come i prezzi di automobili o quelli di assicurazione sulla vita.

Per vederlo in azione, immaginare che avete un widget sul sito della vostra azienda in cui gli utenti possono specificare l’importo da investire nella vostra azienda con un cambio secondo una certa percentuale che varia per ogni anno. Sulla base di questa situazione, si può avere un modulo che utilizza l’elemento <output>, come illustrato di seguito:

Live demo

L’elemento dfn ci permette di definire un termine. Nella sua forma più semplice, contiene il termine da definire con il tag define, per poi avvolgerlo con un paragrafo, un gruppo elenco descrizione, o una sezione contenente la definizione. Per capire il concetto, diciamo che stiamo scrivendo una pagina in cui stiamo descrivendo HTML, e vogliamo definirlo. Per farlo utilizzando il tag <dfn>, possiamo scrivere:

In questo caso, abbiamo definito il termine del codice HTML, che è l’acronimo. Quindi, potremmo migliorare la nostra marcatura ulteriormente scrivendo:

Per scegliere quello che è il termine definito, la norma specifica un elenco di priorità fatta di 3 punti. La priorità va quando non viene specificato l’attributo title del tag <dfn> e poi si dovrebbe definire in un elemento figlio abbr di dfn (come mostrato nel secondo esempio). L’ultima priorità va al testo dell’elemento dfn (come mostrato nel primo esempio).