HTML time – Zeitpunkt und Dauer

HTML time tag mit datetime Attribut für Zeit, Datum, bei Events

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.

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 entsteht ein hörbares Datum.

Maschinenlesbare Zeitangaben

time kommt und geht: Das Tag für Zeitangaben wurde zugunsten des unhandlichen data 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>2017-09</time>     // Jahr und Monat
<time>2017-09-01</time>  // Jahr Monat Tag
<time>11-12</time>       // Monat und Tag
<time>14:54</time>       // Uhrzeit
<time>2017-W46</time>    // Zeitangabe in Woche
<time>2017-09-16T18:20:00+01:00</time>  // 16.9.2017 um 18:20 Uhr Zeitzone GMT + 1 (z.B. Italien)

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="2017-09">September 2017</time>
<time datetime="2017-09-01">1.9.2017</time>

Maschinenlesbare Zeitangabe

Streetdance Plakat
Streetdance 27.2.2017 Einlass 19:00 Uhr

Für die Suchmaschinen und für Scripte ist 27.2.2017 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="2017-02-27 19:00">17.2.2016 Einlass 19 Uhr</time>
Der Littard-Markt im <time datetime="2017-11">November 2017</time>
Nacht der Filmemacher <time datetime="2017-02-17T20:00">17 Feb 2017</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.

ZWEI TAUSEND UND ACHTZEHN 27.2.2017 ab 19UhrSTRETDANCEE