Das `time`-Element

Der folgende Beitrag wurde von Ty Strong verfasst. Ty bemerkte einen seltsamen Mangel an Informationen zum <time>-Element hier auf CSS-Tricks und ich stimmte ihm zu. Das darf nicht passieren! Bitte weitermachen, Ty.

Das <time>-Element in HTML repräsentiert ein maschinenlesbares Datum, eine Uhrzeit oder eine Dauer. Es kann nützlich sein für die Erstellung von Veranstaltungsplänen, Archiven und anderen zeitbasierten Funktionen. WordPress verwendet das time-Element im Standarddesign. Reddit verwendet ebenfalls das time-Element.

Eine kurze Geschichte

Das time-Element hatte einen steinigen Weg. Es wurde 2009 in die HTML5-Spezifikationen aufgenommen. Zwei Jahre später, 2011, wurde die Spezifikation fallen gelassen und durch ein viel breiteres Element, <data>, ersetzt. Später im selben Jahr wurde das time-Element mit einigen überarbeiteten Funktionen wieder aufgenommen.

Seien Sie versichert, Sie können es verwenden!

Bruce Lawson deckt die Situation gut ab: weg, zurück, jetzt. Ein klassischer Moment in der HTML-Geschichte des „Pflasterns von Kuhwegen“.

Der Tag und das Attribut

Time ist nur ein HTML-Tag. Hier ist ein einfaches Beispiel, das November 2011 repräsentiert

<time>2011-11</time>

Der Text darin ist zufällig ein gültiger Wert für das datetime-Attribut (mehr dazu gleich). Aber das muss nicht sein. Sie könnten diesen Text in ein datetime-Attribut verschieben und einen anderen Text verwenden.

<time datetime="2011-11">A cold winter month many years ago</time>

Das datetime-Attribut ist das, was das time-Element einzigartig macht. Es repräsentiert das Datum, die Uhrzeit oder die Dauer für jeden Text, den Sie in einem maschinenlesbaren Format darstellen. Das bedeutet, es ist für Computer und nicht für Menschen, daher hat es sehr spezifische Formate.

Es ist wahrscheinlich etwas üblicher, dass die für Menschen lesbare Version nur eine textuelle Darstellung des datetime ist

<time datetime="2011-11">November, 2011</time>

10 Wege

Es gibt eine Vielzahl von Standardwegen, um das datetime-Attribut zu formatieren.

Jahr und Monat

2014-06

Sehr einfach. Jahr vor Monat.

Datum

1969-07-16

Jahr, Monat und dann Tag.

Jahresloses Datum

12-31

Monat vor Tag.

Nur Zeit

14:54:39.929

Stunde, Minute, dann Sekunden. Sekunden sind optional. Bruchteile von Sekunden können bis zu drei Stellen darstellen.

Datum und Uhrzeit

2013-11-20T14:54

Kombination aus Datum und Uhrzeit, getrennt durch ein Großbuchstaben T. Das große „T“ kann durch ein Leerzeichen ersetzt werden.

Zeitzonenverschiebung

+06:00

Beginnt mit einem Plus- oder Minuszeichen. Ein Doppelpunkt (:) ist optional. +00:00 oder UTC-Zeit kann durch den Großbuchstaben „Z“ dargestellt werden.

Lokales Datum und Uhrzeit

2019-12-31T23:59:59-02:00

Dies ist dasselbe wie Datum und Uhrzeit mit einer hinzugefügten Zeitzonenverschiebung. Auch hier kann „T“ durch ein Leerzeichen ersetzt werden.

Jahr und Woche

2010-W21

Jahr gefolgt von einem Großbuchstaben „W“ mit der entsprechenden Wochennummer.

Nur Jahr

1776

Dies muss vier oder mehr Ziffern haben, daher funktionieren sowohl `0001` als auch `12345`.

Dauer (Methode Eins)

P2DT2H30M10.501S

Großer Buchstabe „P“, ein optionaler Tageswert, großer Buchstabe „T“, dann optionale Werte für Stunden, Minuten und Sekunden. Alle Buchstaben müssen großgeschrieben sein.

Dauer (Methode Zwei)

1w 2d 2h 30m 10.501s

Woche (w), Tag (d), Stunde (h), Minute (m) und Sekunden (s). Der Buchstabe kann groß- oder kleingeschrieben sein. Leerzeichen sind optional.

Beispiele

Google released Gmail Blue on <time datetime="2013-04-01">April 1st, 2013</time>.

The Chelyabinsk meteor entered Earth's atmosphere over Russia on <time datetime="2013-02-15T09:20+06:00">15 February 2013 at about 09:20 YEKT (03:20 UTC)</time>.

The Apollo 13 mission lasted a total of <time datetime="5d 22h 54m 41s">5 days, 22 hours, 54 minutes, and 41 seconds</time>.

Probleme bei der Formatierung des Datetime?

Mit diesem kleinen Werkzeug können Sie ein bestimmtes Datum oder eine bestimmte Uhrzeit (oder beides) eingeben und es wird den korrekten datetime-Wert ausgeben.

Siehe den Pen Datetime Creator Tool von Chris Coyier (@chriscoyier) auf CodePen.

Browser-Unterstützung

Browserunterstützung ist kein großes Problem mit dem time-Element. Wenn ein Browser damit vertraut ist, ist es großartig, wenn nicht, wird er es als generisches Inline-Element behandeln, was völlig in Ordnung ist. Das datetime-Attribut ist ebenfalls perfekt zugänglich.

Es gibt jedoch eine DOM-Schnittstelle, die mit dem time-Element verbunden ist. Insbesondere `dateTime` sollte auf einer Referenz zu diesem Element verfügbar sein.

<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>
<script>
  var time = document.getElementsByTagName("time")[0];
  console.log(time.dateTime);
  // outputs "2001-05-15 19:00"
</script>

Dies wird nur in Firefox unterstützt und ist ohnehin nicht besonders nützlich, da es nur dieses Attribut zurückgibt (es gibt nicht einmal einen Wert zurück, wenn das Attribut nicht vorhanden ist, aber der Text ein gültiger Wert ist, was sinnvoll zu sein scheint).

Was ist der Vorteil der Verwendung von <time>?

Ich werde Bruce noch einmal zitieren, da er es in einem Beitrag auf HTML5 Doctor sehr gut ausdrückt

Die Verwendungszwecke von eindeutigen Datumsangaben in Webseiten sind nicht schwer vorstellbar. Ein Browser könnte anbieten, Ereignisse zum Kalender eines Benutzers hinzuzufügen. Ein thailändisch lokalisierter Browser könnte anbieten, gregorianische Daten in thailändische buddhistische Ära-Daten umzuwandeln. Ein japanischer Browser könnte <time>16:00</time> in „16:00時“ lokalisieren. Content-Aggregatoren können visuelle Zeitstrahlen von Ereignissen erstellen.

Suchmaschinen können intelligentere Suchergebnisse liefern. Zum Beispiel habe ich bei dem jüngsten starken Schneefall im Vereinigten Königreich nach Schulschließungen in meiner Stadt gesucht und festgestellt, dass die Schule meiner Kinder geschlossen war. Nachdem ich einen Anruf von der Schule erhalten hatte, in dem ich gefragt wurde, wo meine Kinder seien, untersuchte ich die Webseite erneut. In Kleindruck am unteren Rand der Seite stand: „Veröffentlicht am 5. Januar 2008“. Ich gehe davon aus, dass Betreiber von Suchmaschinen aktuellere Seiten bei Suchanfragen mit Bezug auf aktuelle Ereignisse höher einstufen.

Sonstige Kleinigkeiten

Eine weitere Sache, die Sie mit dem time-Element machen können, ist das Hinzufügen eines title-Attributs, um dem Benutzer detailliertere Informationen anzuzeigen. Das bedeutet, Sie können dieselbe Information auf drei Arten anbieten

• Eine schön lesbare Anzeigeform
• Ein detaillierteres, menschlich lesbares Hover-Format
• Ein maschinenlesbares Format

Dies wird auf CodePen verwendet

Dies ist der Rails-Code, der diese verschiedenen Formate ausgibt (STRFTIME ist ein schönes Werkzeug dafür)

<time 
  datetime="<%= @pen.created_at.strftime("%Y-%m-%dT%H:%M") %>"
  title="<%= @pen.created_at.strftime("%Y-%m-%d at %I:%M %p") %>">
    <%= @pen.created_at.strftime("%B %d, %Y") %>
</time>

Verwenden Sie <time> in einem Ihrer Projekte?