Tag HTML <time>
Il tag <time>, un nuovo elemento di HTML 5, definisce un orario leggibile dall'uomo su un orologio a 24 ore o una data precisa nel calendario gregoriano.
Il tag <time> è uno degli elementi HTML5. Contrassegna un momento nel tempo o un intervallo di tempo in modo che sia leggibile dalle persone e analizzabile dalle macchine. Può rappresentare uno dei seguenti:
- un orario leggibile dall'uomo su un orologio a 24 ore,
- una data precisa nel calendario gregoriano (con informazioni opzionali su fuso orario e orario),
- una durata.
Il tag <time> non deve essere utilizzato per date precedenti all'introduzione del calendario gregoriano.
Perché usare <time>? L'aspetto leggibile dalle macchine
Il testo visibile all'interno di un elemento <time> rimane in formato libero e amichevole per l'utente — puoi scrivere "Venerdì prossimo", "28 settembre" o "tra due ore". L'attributo opzionale datetime porta una versione rigida e leggibile dalle macchine dello stesso momento, affinché il software possa comprenderlo con precisione:
- I motori di ricerca leggono
datetimeper creare risultati più intelligenti e consapevoli del tempo (ad esempio, mostrando le date degli eventi negli snippet ricchi). - Gli strumenti di calendario e i browser possono offrire promemoria "aggiungi al calendario" perché conoscono l'istante esatto, non solo le parole.
- Script e tecnologie assistive possono riformattare, localizzare o confrontare il valore in modo affidabile.
Se si omette l'attributo datetime, il contenuto testuale dell'elemento stesso deve essere una stringa data/ora valida — e in quel caso l'elemento non deve contenere elementi annidati, solo testo.
Sintassi
L'elemento <time> richiede sia il tag di apertura che quello di chiusura. Il contenuto viene scritto tra i tag di apertura <time> e di chiusura </time>.
Esempio del tag HTML <time>:
Tag HTML <time>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<p>The game will be held on <time datetime="2018-09-28T19:00">September 28</time>.</p>
<p>It will start at <time>19:00</time></p>
</body>
</html>Nel primo paragrafo l'attributo datetime contiene il valore preciso leggibile dalla macchina, mentre il testo visibile recita "September 28". Nel secondo, non c'è l'attributo datetime, quindi il testo 19:00 è esso stesso il valore leggibile dalla macchina.
I formati di datetime
L'attributo datetime deve contenere una stringa data/ora valida, seguendo le convenzioni ISO 8601 utilizzate da HTML. Ecco i formati comuni, pronti per il copia-incolla:
| Cosa rappresenta | Valore di esempio | Note |
|---|---|---|
| Data | 2024-03-15 | Anno-Mese-Giorno. |
| Anno e mese | 2024-03 | Giorno omesso. |
| Solo orario | 14:30 | Orologio a 24 ore, :ss opzionale. |
| Data e ora (UTC) | 2024-03-15T14:30:00Z | T separa data e ora; Z significa UTC. |
| Data e ora con offset | 2024-03-15T14:30:00+02:00 | Offset del fuso orario rispetto a UTC. |
| Durata | PT2H30M | "2 ore, 30 minuti". |
| Durata (giorni) | P2D | "2 giorni". |
| Settimana | 2024-W11 | L'11a settimana ISO del 2024. |
Una durata inizia sempre con P (periodo); un T precede i componenti dell'orario, quindi PT2H30M si legge come 2 ore e 30 minuti, mentre P2D è 2 giorni.
Esempio: un valore solo orario
Qui il testo visibile è anche il valore leggibile dalla macchina, quindi non è necessario l'attributo datetime.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<p>Doors open at <time>09:00</time> sharp.</p>
</body>
</html>Esempio: una durata
Usa l'attributo datetime con un valore P/PT per indicare quanto dura qualcosa.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<p>The recipe needs <time datetime="PT2H30M">2 hours and 30 minutes</time> in the oven.</p>
</body>
</html>Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| datetime | YYYY-MM-DD, YYYY-MM-DDThh:mm, hh:mm, ecc. | Specifica l'ora/data in un formato leggibile dalle macchine. Il valore deve seguire un formato di stringa data/ora valido (ad es. ISO 8601). Sono supportati anche gli offset di fuso orario come +02:00 o Z. |
Il tag <time> supporta anche gli Attributi Globali.
Nota: L'attributo pubdate era precedentemente supportato, ma è stato deprecato e rimosso nelle specifiche HTML successive.
Stilizzare <time>
L'elemento <time> è inline e non stilizzato per impostazione predefinita, quindi appare come il testo circostante. Un trucco utile è il selettore di attributo time[datetime], che seleziona solo gli elementi che portano un valore leggibile dalla macchina — ad esempio, per mostrare il valore esatto al passaggio del mouse tramite un title, o per dare a quegli istanti un segnale visivo sottile.
/* Highlight only <time> elements that have a datetime attribute */
time[datetime] {
border-bottom: 1px dotted currentColor;
cursor: help;
}Tag correlati
- Tag HTML
<data>— la controparte di uso generale per valori leggibili dalle macchine non temporali. - Riferimento agli elementi HTML5 — l'elenco completo degli elementi introdotti in HTML5.