WMP Sites

Die <time>-Tag in HTML: Zeitliche Details präzise und strukturiert angeben

Lukas Fuchs vor 7 Monaten in  Webentwicklung 3 Minuten Lesedauer

Was ist das <time>-Tag und wann sollte es verwendet werden?

Das <time>-Tag in HTML ermöglicht es dir, zeitliche Informationen auf deiner Webseite präzise und strukturiert anzugeben. Es ist ein semantisches Tag, das speziell dafür entwickelt wurde, Datum und Uhrzeit darzustellen.

Wann ist das `

Das <time>-Tag sollte verwendet werden, wenn du Zeitstempel für Ereignisse, Aktivitäten atau Transaktionen auf deiner Webseite angeben möchtest. Hier sind einige häufige Anwendungsfälle:

  • Blogbeiträge und Artikel: Verwende das <time>-Tag, um das Datum der Veröffentlichung oder Aktualisierung von Inhalten anzugeben.
  • Veranstaltungen: Markiere Datum und Uhrzeit von bevorstehenden oder vergangenen Veranstaltungen.
  • E-Commerce-Websites: Verwende das <time>-Tag, um Bestelldatum und -uhrzeit anzugeben.
  • Soziale Medien: Formatiere Zeitstempel für Posts und Kommentare.
  • Finanzielle Transaktionen: Gib das Datum und die Uhrzeit von Zahlungen oder Überweisungen an.

Vorteile der Verwendung des `

Die Verwendung des <time>-Tags bietet mehrere Vorteile:

  • Verbesserte Zugänglichkeit: Das <time>-Tag erleichtert Menschen mit Sehbehinderungen die Interpretation von Zeitinformationen.
  • Strukturierte Daten: Suchmaschinen und andere Tools können die im <time>-Tag enthaltenen Informationen einfacher analysieren.
  • Semantische Klarheit: Das <time>-Tag gibt deutlich an, dass der enthaltene Text zeitliche Informationen darstellt.
  • Konsistenz: Es sorgt für eine einheitliche Darstellung von Zeitinformationen auf deiner Webseite.

Attribute des <time>-Tags zur Definition von Zeit und Datum

Um Zeit und Datum präzise im <time>-Tag anzugeben, verwendest du verschiedene Attribute:

datetime

Das datetime-Attribut stellt die maschinenlesbare Repräsentation von Datum und Uhrzeit dar und folgt dem ISO 8601-Format. Dies ist das wichtigste Attribut und sollte immer angegeben werden.

<time datetime="2023-03-08T10:30:00Z">10:30 Uhr</time>

pubdate (veraltet)

Das pubdate-Attribut ist veraltet und sollte nicht mehr verwendet werden. Es gibt das Veröffentlichungsdatum im RFC 822-Format an, z. B.:

<time pubdate="Tue, 08 Mar 2023 10:30:00 GMT">10:30 Uhr</time>

title

Das title-Attribut liefert eine lesbare Version von Datum und Uhrzeit und kann von Browsern in einem Tooltip angezeigt werden. Es sollte nicht für maschinenlesbare Zwecke verwendet werden.

<time datetime="2023-03-08T10:30:00Z" title="Mittwoch, 08. März 2023, 10:30 Uhr">10:30 Uhr</time>

timezone

Das timezone-Attribut gibt die Zeitzone an, in der Datum und Uhrzeit angegeben sind. Es folgt dem Format [+|-]HH:MM und kann z. B. wie folgt verwendet werden:

<time datetime="2023-03-08T10:30:00Z" timezone="+01:00">10:30 Uhr</time>

multiple

Das multiple-Attribut wird verwendet, um anzugeben, dass das <time>-Tag mehrere Zeitspannen darstellt. Dies ist hilfreich, wenn du z. B. den Start- und Endzeitpunkt eines Ereignisses notieren möchtest.

<time multiple datetime="2023-03-08T10:30:00Z/2023-03-08T12:00:00Z">10:30 Uhr - 12:00 Uhr</time>

offset

Das offset-Attribut gibt den Zeitunterschied an, der auf die angegebene Zeit angewendet werden soll. Dies ist hilfreich, wenn du Datum und Uhrzeit in einer anderen Zeitzone anzeigen möchtest.

<time datetime="2023-03-08T10:30:00Z" offset="+02:00">12:30 Uhr</time>

Verwendung des

Mit dem

Vorteile für die Strukturierung von Daten

Verbesserte Suche und Indexierung: Suchmaschinen wie Google erkennen das

Erhöhte Lesbarkeit und Zugänglichkeit: Für Leser macht das

Kompatibilität mit Schema.org: Das

Verwendung in strukturierten Daten

Um das

  • Veranstaltungen: Angabe von Datum und Uhrzeit einer Veranstaltung, z. B. "Die Konferenz findet am um statt."
  • Neuigkeiten: Angabe des Datums und der Uhrzeit der Veröffentlichung eines Artikels, z. B. "Dieser Artikel wurde am um veröffentlicht."
  • Produktupdates: Angabe des Datums und der Uhrzeit eines Software- oder Firmware-Updates, z. B. "Das neueste Update wurde am veröffentlicht."
  • Rezepte: Angabe der Gar- oder Backzeit eines Rezepts, z. B. "Backzeit: ".

Durch die Verwendung des

Vorteile der Verwendung des

Die Verwendung des

Suchmaschinenoptimierung (SEO)

  • Verbessertes Ranking in Suchergebnissen: Suchmaschinen wie Google bevorzugen Websites mit strukturierten Daten, einschließlich Datum und Uhrzeit, da sie diese Informationen verwenden können, um relevante und zeitnahe Ergebnisse anzuzeigen.
  • Detaillierte Snippets in Suchergebnissen: Wenn du das
  • Zeitempfindliche Keywords: Wenn du das

Barrierefreiheit

  • Unterstützung von Hilfstechnologien: Hilfstechnologien wie Bildschirmlesegeräte können Informationen aus dem
  • Verbessertes Verständnis: Wenn du das
  • Barrierefreiheitserklärung: Die Verwendung des

Praktische Beispiele für die Anwendung des

Das

Datum und Uhrzeit von Ereignissen

Verwende das

<p>Der nächste Astronomie-Vortrag findet am <time datetime="2023-03-08T19:00:00">8. März um 19:00 Uhr</time> statt.</p>

Dauer von Ereignissen

Gib mit dem

<p>Das Musikfestival dauert vom <time datetime="2023-07-15">15. Juli</time> bis zum <time datetime="2023-07-22">22. Juli</time>.</p>

Veröffentlichungs- und Aktualisierungsdaten

Verwende das

<p>Dieser Blogbeitrag wurde ursprünglich am <time datetime="2022-10-01">1. Oktober 2022</time> veröffentlicht und zuletzt am <time datetime="2023-02-15">15. Februar 2023</time> aktualisiert.</p>

Historische Daten

Gib mit dem

<p>Die erste Mondlandung fand am <time datetime="1969-07-20">20. Juli 1969</time> statt.</p>

Relative Zeitanweisungen

Verwende das

<p>Die Live-Übertragung beginnt in <time datetime="PT30M">30 Minuten</time>.</p>

Zu vermeidende Fallstricke und Best Practices bei der Verwendung des

Bei der Verwendung des

Vermeide relative Zeitangaben

Verwende keine relativen Zeitangaben wie "morgen" oder "gestern", da diese für verschiedene Leser unterschiedlich interpretiert werden können. Verwende stattdessen absolute Zeitangaben in Verbindung mit dem DateTime-Format.

Stelle die Kompatibilität mit älteren Browsern sicher

Nicht alle Browser unterstützen das

Verwende korrekte Syntax

Achte auf die korrekte Syntax für das datetime-Attribut. Ungültige Daten können zu Problemen führen und dazu, dass das

Best Practices

  • Verwende das Verwende es immer, wenn du zeitliche Informationen anzeigst, um eine einheitliche Nutzererfahrung zu gewährleisten.
  • Gib detaillierte Informationen an: Stelle möglichst genaue Informationen zu Datum und Uhrzeit bereit, einschließlich Zeitzoneninformationen falls relevant.
  • Optimierung für Suchmaschinen: Verwende strukturierte Daten, um Suchmaschinen die Erkennung und Interpretation zeitlicher Informationen zu erleichtern.
  • Verbesserung der Barrierefreiheit: Verwende maschinenlesbare Formate wie ISO 8601, um die Zugänglichkeit für Bildschirmlesegeräte und andere assistive Technologien zu verbessern.
  • Vermeide übermäßigen Einsatz: Verwende das

Alternativen zum

Neben dem

Zeit-Element

Das -Element bietet eine weitere Möglichkeit, Zeit und Datum zu kennzeichnen. Es ist jedoch weniger flexibel als das

Vorteile:

  • Leichtgewichtig
  • Einfach zu implementieren

Nachteile:

  • Bietet keine Formatierungsoptionen
  • Unterstützung durch Suchmaschinen kann eingeschränkt sein

-Tag mit dem http-equiv="Date"-Attribut

Das -Tag kann mit dem Attribut http-equiv="Date" verwendet werden, um das Veröffentlichungs- oder Aktualisierungsdatum eines Dokuments anzugeben.

Vorteile:

  • Wird von Suchmaschinen erkannt
  • Nützlich für die Archivierung

Nachteile:

  • Gibt nur das Gesamtdatum an, nicht die genaue Zeit
  • Kann mit dem

JavaScript-Datumsobjekte

JavaScript ermöglicht es dir, mit dem Date-Objekt Zeit und Datum zu bearbeiten und anzuzeigen. Du kannst JavaScript verwenden, um dynamische Datums- und Zeitanzeigen zu erstellen.

Vorteile:

  • Ermöglicht eine präzise Formatierung
  • Bietet Interaktivität

Nachteile:

  • Erfordert JavaScript-Kenntnisse
  • Kann die Seitenladezeit erhöhen

Externe Datums- und Zeitformatierungsbibliotheken

Es gibt verschiedene JavaScript-Bibliotheken von Drittanbietern, die Funktionen zur Formatierung von Datums- und Zeitangaben bieten, wie z. B. Moment.js und Date-fns.

Vorteile:

  • Bietet umfangreiche Formatierungsoptionen
  • Kann die Entwicklung vereinfachen

Nachteile:

  • Erfordert externe Abhängigkeiten
  • Kann die Seitenladezeit erhöhen

Die Wahl der geeignetsten Alternative hängt von deinen spezifischen Anforderungen und deinem Entwicklungsstapel ab. Wenn du eine grundlegende Kennzeichnung von Zeit und Datum benötigst, reicht das -Element möglicherweise aus. Wenn du jedoch präzise Formatierung, Suchmaschinenoptimierung oder Interaktivität benötigst, solltest du das

Folge uns

Neue Posts

Beliebte Posts