HTML <time>-Tag
Das <time>-Tag, ein neues Element in HTML 5, wird verwendet, um eine für Menschen lesbare Uhrzeit oder ein genaues Datum im Gregorianischen Kalender zu definieren.
Das <time>-Tag ist eines der HTML5-Elemente. Es markiert einen Zeitpunkt oder eine Zeitspanne, sodass er sowohl von Menschen lesbar als auch von Maschinen verarbeitbar ist. Es kann eines der folgenden darstellen:
- eine für Menschen lesbare Uhrzeit auf einer 24-Stunden-Uhr,
- ein genaues Datum im Gregorianischen Kalender (mit optionalen Zeitzonen- und Zeitangaben),
- eine Dauer.
Das <time>-Tag sollte nicht für Daten verwendet werden, die vor der Einführung des Gregorianischen Kalenders liegen.
Warum <time> verwenden? Der maschinenlesbare Aspekt
Der sichtbare Text innerhalb eines <time>-Elements bleibt freiform und für Menschen verständlich — Sie können „Nächsten Freitag", „28. September" oder „in zwei Stunden" schreiben. Das optionale datetime-Attribut enthält eine strenge, maschinenlesbare Version dieses Moments, damit Software ihn präzise verstehen kann:
- Suchmaschinen lesen
datetime, um intelligentere, zeitbewusste Ergebnisse zu erstellen (zum Beispiel, um Veranstaltungsdaten in Rich Snippets anzuzeigen). - Kalender-Tools und Browser können „Zum Kalender hinzufügen"-Erinnerungen anbieten, weil sie den genauen Moment kennen, nicht nur die Wörter.
- Skripte und assistive Technologien können den Wert zuverlässig neu formatieren, lokalisieren oder vergleichen.
Wenn Sie das datetime-Attribut weglassen, muss der Textinhalt des Elements selbst ein gültiger Datums-/Zeitstring sein — in diesem Fall darf das Element keine verschachtelten Elemente enthalten, sondern nur Text.
Syntax
Das <time>-Element erfordert sowohl öffnende als auch schließende Tags. Der Inhalt wird zwischen dem öffnenden <time>- und dem schließenden </time>-Tag geschrieben.
Beispiel des HTML <time>-Tags:
HTML <time>-Tag
<!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>Im ersten Absatz enthält das datetime-Attribut den genauen Maschinenwert, während der sichtbare Text „September 28" lautet. Im zweiten gibt es kein datetime-Attribut, sodass der Text 19:00 selbst der maschinenlesbare Wert ist.
Die datetime-Formate
Das datetime-Attribut muss einen gültigen Datums-/Zeitstring enthalten, der den ISO 8601-Konventionen folgt, die HTML verwendet. Hier sind die gängigen, kopierbereiteten Formate:
| Dargestellter Inhalt | Beispielwert | Hinweise |
|---|---|---|
| Datum | 2024-03-15 | Jahr-Monat-Tag. |
| Jahr und Monat | 2024-03 | Tag weggelassen. |
| Nur Uhrzeit | 14:30 | 24-Stunden-Uhr, optionales :ss. |
| Datum und Uhrzeit (UTC) | 2024-03-15T14:30:00Z | T trennt Datum und Uhrzeit; Z bedeutet UTC. |
| Datum und Uhrzeit mit Versatz | 2024-03-15T14:30:00+02:00 | Zeitzonenversatz von UTC. |
| Dauer | PT2H30M | „2 Stunden, 30 Minuten". |
| Dauer (Tage) | P2D | „2 Tage". |
| Woche | 2024-W11 | Die 11. ISO-Woche des Jahres 2024. |
Eine Dauer beginnt immer mit P (Periode); ein T geht den Zeitkomponenten voraus, sodass PT2H30M als 2 Stunden und 30 Minuten gelesen wird, während P2D 2 Tage bedeutet.
Beispiel: Ein reiner Zeitwert
Hier ist der sichtbare Text auch der Maschinenwert, daher wird kein datetime-Attribut benötigt.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<p>Doors open at <time>09:00</time> sharp.</p>
</body>
</html>Beispiel: Eine Dauer
Verwenden Sie das datetime-Attribut mit einem P/PT-Wert, um anzugeben, wie lange etwas dauert.
<!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>Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| datetime | YYYY-MM-DD, YYYY-MM-DDThh:mm, hh:mm, usw. | Gibt die Uhrzeit/das Datum in einem maschinenlesbaren Format an. Der Wert muss einem gültigen Datums-/Zeitstring-Format folgen (z. B. ISO 8601). Zeitzonenversätze wie +02:00 oder Z werden ebenfalls unterstützt. |
Das <time>-Tag unterstützt auch die Globalen Attribute.
Hinweis: Das pubdate-Attribut wurde früher unterstützt, wurde jedoch in späteren HTML-Spezifikationen als veraltet markiert und entfernt.
Styling von <time>
Das <time>-Element ist standardmäßig inline und ohne Formatierung, sodass es wie der umgebende Text aussieht. Ein nützlicher Trick ist der Attribut-Selektor time[datetime], der nur die Elemente mit einem maschinenlesbaren Wert anspricht — zum Beispiel, um den genauen Wert beim Hover über ein title-Attribut anzuzeigen oder diesen Momenten einen subtilen visuellen Hinweis zu geben.
/* Highlight only <time> elements that have a datetime attribute */
time[datetime] {
border-bottom: 1px dotted currentColor;
cursor: help;
}Verwandte Tags
- HTML
<data>-Tag — das universelle Gegenstück für nicht-zeitliche maschinenlesbare Werte. - HTML5-Elemente-Referenz — die vollständige Liste der in HTML5 eingeführten Elemente.