<time>

Zuletzt aktualisiert am 4. Februar 2026

Das <time>-Element macht Datums- und Zeitangaben maschinenlesbar. Browser zeigen es visuell nicht anders an als normalen Text — der Mehrwert liegt unter der Haube: Suchmaschinen, Kalender-Apps und assistive Technologien können das Datum verstehen und verarbeiten. Du schreibst für den Nutzer “14. Februar 2026” und sagst der Maschine über das datetime-Attribut 2026-02-14. Auf dieser Seite lernst du, welche Formate das datetime-Attribut akzeptiert, wann du <time> einsetzen solltest und welche Fehler du vermeiden kannst.

Grundlagen

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

Syntax

<p>Dieser Artikel wurde am
<time datetime="2026-02-14">14. Februar 2026</time> veröffentlicht.</p>

Attribute

datetime-Formate

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

Beispiele

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>

Barrierefreiheit

• 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.

Häufige Fehler

• 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.

Browser-Kompatibilität

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

Email-Kompatibilität

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.

Verwandte Elemente