HTML time – Zeit und Dauer

HTML time tag

HTML time umfasst die Angabe einer Zeit im Klartext mit einem optionalen maschinenlesbaren Attribut datetime für maschinenlesbare Zeitangaben.

time kann ein Datum oder eine Uhrzeit exakt oder vage darstellen, aber keine Zeitdauer.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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>2022-11</time>     // Jahr und Monat
<time>2022-11-11</time>  // Jahr Monat Tag
<time>11-03</time>       // Monat und Tag
<time>14:54</time>       // Uhrzeit
<time>2022-W46</time>    // Zeitangabe in Woche
<time>2022-12-06T18:30:00+01:00</time>  // 6.12.2022 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="2022-12">Dezember '22</time>
<time datetime="2022-12-06">6.12.2022</time>

Maschinenlesbare Zeitangabe

Streetdance 11.11.2022 Einlass 19:00 Uhr

Für die Suchmaschinen und für Scripte ist 11.11.2022 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="2020-05-27 19:00">27.5.2020 Einlass 19 Uhr</time>
Der Littard-Markt im <time datetime="2020-11">Nov 2020</time>
Nacht der Filmemacher <time datetime="2020-05-17T20:00">17 Mai 2020</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.