Aktuell oder altbacken?
Wie oft stolpern wir bei Recherchen im Internet über veraltete Beiträge? Das Datum der Veröffentlichung oder der letzten Überarbeitung gleich oben auf der Seite schafft Vertrauen. Dafür gibt es ein eigenes HTML-Element: time.
Das time-Tag ist ein Schritt zur Barrierefreiheit, denn anstelle von Zahlen und Punkten wie 6.1.23 18:45 Uhr entsteht mit time ein hörbares Datum. Gleichzeitig verstehen auch die Suchmaschinen die Zeitangaben des time-Elements und zeigen sie im Suchindex an – neben Header und einem guten Text ein weiteres Kriterium für den Suchenden.
Maschinenlesbare Zeitangaben
time kommt und geht: Das Tag für Zeitangaben wurde zugunsten des unhandlichen date aus dem Standard genommen, weil es u.a. keine vagen Zeitangaben und keine Dauer wiedergeben konnte. Dann wurde das time-Tag wieder freundlich aufgenommen – nicht zuletzt, weil es auch von WordPress und Drupal verwendet wurde.
time ist wie span oder em ein inline-Element – führt nicht zu einem Zeilenumbruch – und muss geschlossen werden.
Die Zeitangabe im Gregorianischen Kalender steht im einfachsten Fall als Text zwischen öffnendem und schließenden Tag:
<time>2024-07</time> // Jahr und Monat <time>2022-17-15</time> // Jahr Monat Tag <time>11-03</time> // Monat und Tag <time>14:54</time> // Uhrzeit <time>2024-W46</time> // Zeitangabe in Woche <time>2024-12-06T18:30:00+01:00</time> // 6.12.2024 um 18:30 Uhr Zeitzone GMT + 1 (Berlin mal wieder)
Das Datum folgt dem Schema YYYY-MM-DD (vierstellige Jahreszahl gefolgt von zweistelliger Monatszahl gefolgt von zweistelliger Tageszahl),
die Uhrzeit dem Schama HH:MM[:SS[.mmm]] (Stunde Minute Sekunde Millisekunde).
Das praktische Format Jahr Monat Tag läßt sich gut sortieren, ist aber in Deutschland gewöhnungsbedürftig – wir stellen den Tag vor den Monat, in Italien schreibt man meist dd/mm/yyyy oder d/m/yy. Dabei soll sich das time-Element aber in erster Linie an den Leser wenden.
Das datetime-Attribut
Ohne datetime-Attribut muss die Zeitangabe im Standard-Format erfolgen. Damit der Leser ein übliches Format innerhalb des time-Tags zu sehen bekommt, muss die maschinenlesbare Zeit ins datetime-Attribut gesetzt werden.
<time datetime="2024-12">Dezember '22</time> <time datetime="2024-12-06">6.12.2024</time>
Maschinenlesbare Zeitangabe
Für die Suchmaschinen und für Scripte ist 11.07.2024 nur eine Folge von Ziffern und Punkten. Mit der maschinenlesbaren Zeit im Markup können die Suchmaschinen das Event besser einordnen. Ein Script könnte alle Events auf einer Webseite zu einem Veranstaltungskalender zusammenfassen.
time hat ein eigenes Attribut datetime, das die maschinenlesbare Darstellung des Datums enthält.
Streetdance <time datetime="2024-07-11 19:00">11.07.2024 Einlass 19 Uhr</time>
Der Littard-Markt im <time datetime="2024-11">Nov 2024</time> Nacht der Filmemacher <time datetime="2024-09-17T20:00">17 September 2024</time>
Browser-Support
Da muss sich niemand Sorgen machen: Alle modernen Browser ab IE 9 unterstützten das time-Tag. Und wenn nicht, dann zeigen sie das Datum oder die Uhrzeit immer noch korrekt an.
