<time>

Daten und Uhrzeiten kommen auf Webseiten ständig vor: Veröffentlichungsdatum eines Artikels, Eventtermine, Öffnungszeiten. Für Menschen sind Formate wie “14. Februar 2026” oder “nächsten Montag” verständlich. Maschinen brauchen ein standardisiertes Format. Genau das liefert <time>.

• <time> ist ein Inline-Element: Es fließt im Text mit und erzeugt keinen Zeilenumbruch
• Browser stellen <time> visuell nicht anders dar als normalen Text (es hat keinen sichtbaren Standardstil)
• Das datetime-Attribut enthält die maschinenlesbare Form im ISO-8601-Format
• Wenn kein datetime-Attribut angegeben ist, muss der Textinhalt selbst ein gültiges Datumsformat sein
• Suchmaschinen nutzen <time> für Rich Snippets (z.B. Veröffentlichungsdatum in Suchergebnissen)
• Kalender-Apps können <time> auslesen und Events automatisch erkennen
• Typische Anwendungsfälle: Veröffentlichungsdatum, Eventtermine, Uhrzeiten, Dauern

Das datetime-Attribut akzeptiert verschiedene Formate nach dem ISO-8601-Standard:

Veröffentlichungsdatum eines Artikels

Der häufigste Anwendungsfall im Blog- und Nachrichtenbereich. Suchmaschinen nutzen diese Information für Rich Snippets in den Suchergebnissen:

<article>
  <h2>Neues CSS-Feature: Container Queries</h2>
  <p>Veröffentlicht am <time datetime="2026-01-15">15. Januar 2026</time></p>
  <p>Container Queries sind endlich in allen Browsern verfügbar...</p>
</article>

Eventzeit mit Zeitzone

Für Events und Termine ist die Zeitzone wichtig. Mit dem UTC-Offset wird klar, in welcher Zeitzone die Veranstaltung stattfindet:

<p>
  Der Livestream startet am
  <time datetime="2026-03-20T19:00+01:00">
    20. März 2026 um 19:00 Uhr (MEZ)
  </time>.
</p>
<p>
  Die Keynote dauert
  <time datetime="PT1H30M">1 Stunde und 30 Minuten</time>.
</p>

Relative Zeitangaben

Du kannst für den sichtbaren Text auch relative Angaben verwenden. Das datetime-Attribut liefert trotzdem das exakte Datum:

<!-- Der sichtbare Text ist frei formulierbar -->
<p>
  Dieser Artikel wurde
  <time datetime="2026-02-10">vor 4 Tagen</time> aktualisiert.
</p>
<p>
  Wir treffen uns
  <time datetime="2026-02-14T18:00">heute Abend um 18 Uhr</time>.
</p>

• Screenreader-Verhalten: Die meisten Screenreader lesen den sichtbaren Textinhalt von <time> vor, nicht den Wert des datetime-Attributs. Stelle sicher, dass der sichtbare Text für sich verständlich ist.
• Klare Zeitangaben verwenden: Vermeide mehrdeutige Angaben wie “morgen” oder “nächste Woche” als einzige Information. Ergänze sie mit einem konkreten Datum, damit der Kontext nicht vom Lesezeitpunkt abhängt.
• Zeitzone angeben: Bei Terminen mit internationaler Reichweite solltest du die Zeitzone im sichtbaren Text angeben (z.B. “19:00 Uhr MEZ”), damit alle Nutzer den Termin richtig einordnen können.

• Ungültiges datetime-Format: Das datetime-Attribut akzeptiert nur ISO-8601-Formate. Schreibe datetime="2026-02-14", nicht datetime="14.02.2026" oder datetime="Februar 2026". Deutsche Datumsformate sind nicht gültig.

• time für Zeitspannen ohne datetime verwenden: Wenn du eine Dauer angibst, muss das datetime-Attribut das ISO-8601-Dauerformat verwenden. Schreibe <time datetime="PT2H">2 Stunden</time>, nicht <time>2 Stunden</time>. Ohne datetime kann die Maschine den Wert nicht interpretieren.

• time für nicht-zeitliche Inhalte verwenden: <time> ist ausschließlich für Datums- und Zeitangaben gedacht. Verwende es nicht für Versionsnummern, Preise oder andere Zahlen.

Das time-Element wird von allen modernen Browsern unterstützt. Es wurde mit HTML5 eingeführt.

• Chrome

  Komplett

• Firefox

  Komplett

• Safari

  Komplett

• Edge

  Komplett

• Opera

  Komplett

Da time keinen visuellen Effekt hat, ist die Darstellung in Email-Clients unproblematisch. Der Text wird überall korrekt angezeigt, die semantische Bedeutung geht aber verloren.

• Apple Mail

  Teilweise

  Text wird dargestellt, aber die semantische Bedeutung von datetime wird nicht genutzt

• Gmail

  Teilweise

  Das time-Element wird als normaler Text gerendert, datetime wird ignoriert

• Outlook

  Teilweise

  Text wird angezeigt, das Element selbst hat keine Wirkung

• Thunderbird

  Teilweise

  Text wird korrekt dargestellt, datetime hat keine spezielle Funktion

• Yahoo Mail

  Teilweise

  Wie bei anderen Clients: Text sichtbar, Semantik ignoriert