Come sviluppatore front-end senza dubbio si utilizza costantemente HTML e probabilmente ci sono poche incognite. Tuttavia, il modo in cui si è evoluto (in particolare con l’avvento di HTML5) può sorprendere, a volte. In questo articolo, si mostrano alcuni tag in HTML5 che si potrebbe non utilizzare o forse addirittura non si è ancora a conoscenza e che aiutano ad aumentare la semantica e la manutenibilità delle nostre pagine web.
Elementi semantici

A continuazione una piccola lista dei nuovi tag in HTML5 ch’è opportuno tenere a mente se capita di avere bisogno come mi è successo in questi ultimi tempi.
meter
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:

<meter value="300" min="0" max="500">300Gb of 500Gb</meter> utilizzato.
300Gb of 500Gb utilizato.
progress
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:
<progress value="50" max="100">50%</progress>
50%

O l’equivalente:

<progress value="0.5">50%</progress>
50%

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.

cite
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:

Dobbiamo lottare per i nostri diritti, perché, come diceva <cite>Ezra Pound</cite>, <q>Se un uomo non è disposto a correre qualche rischio per le sue opinioni, o le sue opinioni non sono buone o lui non va bene.</q>
Dobbiamo lottare per i nostri diritti, perché, come diceva Ezra Pound, Se un uomo non è disposto a correre qualche rischio per le sue opinioni, o le sue opinioni non sono buone o lui non va bene.
pre
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:
<pre>
function dimmiCiao(nome) {
    for (var i = 0; i < 3; i++) {
        console.log('Ciao ' + nome + '!');
    }
}

dimmiCiao('Pluto');
</pre>
kbd
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:
<samp><span>mioNome@mioDominio:~$</span> <kbd>ssh demo.esempio.com</kbd>
Ultimo login: Tue Apr 12 09:10:17 2005 da mioDominio.esempio.com
<span class="prompt">mioNome@demo:~$</span> _</samp>
mioNome@mioDominio:~$ ssh demo.esempio.com Ultimo login: Tue Apr 12 09:10:17 2005 da mioDominio.esempio.com mioNome@demo:~$ _
small
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:
Questo articolo è offerto da Rhadrix <small>Copyright © 2014</small>
Questo articolo è offerto da Rhadrix Copyright © 2014
output
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:

<form id="calcola-importo">
   
  <label for="importo">Importo:</label> 
  <input id="importo" type="number"/>
  <label for="percentuale">Percentuale:</label>
  <input id="percentuale" type="number">

  <label for="anni">Anni:</label>
  <input id="anni" type="number">

  <input type="submit" value="Calcola">

  <label for="totale">Totale:</label>
  <output id="totale" for="importo percentuale anni"></output>
</form>
<script>
function calcolaIlTotale(importo, percentuale, anni) {
   for(var i = 0; i < anni; i++) {
      importo += importo * percentuale / 100;
   }

   return importo;
}
document.getElementById('calcola-importo').addEventListener('submit', function(event) {
      event.preventDefault();

      document.getElementById('totale').textContent = calcolaIlTotale(
         Number(document.getElementById('importo').value),
         Number(document.getElementById('percentuale').value),
         Number(document.getElementById('anni').value)
      );
   },
   false
);
</script>
Live demo















dfn
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:
<dfn>HTML</dfn> è la lingua principale per marcare contenuti web.
HTML è la lingua principale per marcare i contenuti web.

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

<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>  è la lingua principale per marcare i contenuti web.
HTML è la lingua principale per marcare i contenuti web.

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).

Concludendo
In questo articolo si è descritto una serie di tag HTML che sono i meno utilizzati, e spesso dimenticati. Vi suggerisco di leggere l’elenco completo dei tag HTML disponibile di volta in volta. In questo modo potete aggiornare la vostra conoscenza sugli elementi semantici, e forse troverete una sorpresa lungo la strada (come mi è capitato con il tag <dfn>).
Similari
L’elemento time HTML5 è tornato e migliore che mai
10% Html5
L’elemento time HTML5 era al punto di sparire l’anno scorso. L’editore Ian Hickson l’aveva eliminato dalle specifiche HTML5, ma poi il W3C, il gruppo che sovrintende HTML5, è intervenuta per soprassedere alla decisione di …
Allineare immagini e testo con i CSS
8% Css
Quando si inserisce un’immagine o del testo in un documento HTML, per default il testo viene allineato verticalmente al basale (baseline), questa è la linea di base del testo e l’immagine. Usando le proprietà CSS vertical-…
Interazione con i campi di un form con CSS
8% Css
Grazie al supporto da parte dei maggiori browser dei CSS Selectors versione 2.1, alcuni semplici effetti grafici possono essere proposti tramite fogli di stile in maniera leggera. In questo post vedremo come evidenziare il…
Selettori CSS definiti
7% Css
Se avete appena iniziato con i CSS, è bene avere una comprensione fondamentale di ciò che si intende quando ci riferiscono ai selettori CSS. In questo post farò una breve descrizione dei più noti selettori CSS insieme ad a…
Le 10 funzionalità principali in HTML5
7% Html5
L’HTML5 posside dei nuovi tag da usare per ottenere comportamenti precisi sulla pagina web. In questo post, si elencano i 10 nuovi, non per importanza ma per il vantaggio funzionale che si possono otenere rapidamente senza…