L'elemento HTML5 time viene usato per rappresentare e marcare un'entità temporale, che può essere una data, un orario o una durata. In questo articolo vedremo come si dovrebbero rappresentare tali unità temporali con questo elemento.
datetime è l'attributo dell'elemento time con cui vengono specificate le coordinate temporali in un formato comprensibile da un interprete. Con questo attributo si possono definire:
- Orari in un arco temporale di 24 ore.
- Date specifiche nel calendario Gregoriano (con eventuale orario e fuso orario).
- Indicazioni di durata.
Orari
Gli orari possono essere rappresentati con tre notazioni:
HH:MM: ora e minuti.HH:MM:SS: ora, minuti e secondi.HH:MM:SS.mmm: ora, minuti, secondi e millesimi di secondo.
Esempio:
<time datetime="08:30:00">08:30</time>
A livello di validazione, viene considerato il formato dell'attributo datetime e i discendenti ammessi all'interno dell'elemento time.
Date
La data di introduzione del calendario Gregoriano è il termine prima del quale non è possibile usare questo elemento con l'attributo datetime senza incorrere in problemi nel computo esatto delle date.
Tuttavia, è possibile omettere tale attributo, nel qual caso l'elemento potrà contenere solo contenuto testuale. Questa caratteristica si rivela essere utile per quei siti e applicativi a tema storico che hanno comunque la necessità di sfruttare la semantica degli elementi HTML5.
Nel caso delle date, vengono accettati tutti i formati standard delle date, compresi quelli con riferimenti agli orari e al fuso orario. Esempio:
<time datetime="2025-08-24T08:30:00">24/08/2025 08:30</time>
Indicazioni di durata
Sono considerate valide indicazioni di durata quelle nel formato PdDThHmMsS e derivate, PThHmMsS e derivate e ww dd hh mm ss, indicanti la durata in giorni, ore, minuti e secondi.
Quindi se dovessimo riportare la durata di un evento che si è svolto in 3 giorni, 2 ore, 5 minuti e 2 secondi, potremmo scrivere:
<time datetime="P3DT2H5M2S">3 giorni, 2 ore, 5 minuti e 2 secondi</time>
<time datetime="3d 2h 5m 2s">3 giorni, 2 ore, 5 minuti e 2 secondi</time>
Conclusione
È possibile rappresentare con precisione le coordinate temporali con l'elemento HTML5 time e il suo attributo datetime. Questo ci consente di migliorare l'accessibilità e la fruizione dei nostri contenuti.