Data i czas <time>
W jaki sposób poprawnie oznaczać datę i czas w dokumentach HTML5?
Data i czas <time>
<time>data/czas</time> <time datetime="data/czas">...</time>
Na stronach internetowych bardzo często spotyka się różnorodne daty czy oznaczenia czasu: publikacja artykułu, wysłanie komentarza, zaplanowane wydarzenia i ich godzinowy rozkład dnia. Takie dane mogłyby zostać wykorzystane np. do automatycznego tworzenia kalendarzy. Problem w tym, że zwykle są one podane w postaci czytelnej dla użytkowników, a nie dla maszyn. Trudno się spodziewać, że automat będzie w stanie poprawnie zinterpretować tekstową nazwę miesiąca w każdym języku mówionym świata. Poza tym w różnych krajach istnieją odmienne konwencje zapisu kolejności poszczególnych części daty (może to być najpierw dzień, a na końcu rok lub na odwrót), a także separatorów poszczególnych członów daty.
Aby przekazać wszelkim automatom, że wybrany tekst na stronie jest datą lub/i czasem, wystarczy oznaczyć go za pomocą znacznika TIME. Trzeba jednak pamiętać, że w przypadku prostego oznaczenia <time>...</time>
zawartość znacznika musi być zapisana w standardowym formacie, bo inaczej nie będzie mogła być poprawnie zinterpretowana. Natomiast jeżeli chcemy użytkownikom prezentować datę w przyjazny dla nich sposób (np. z tekstową nazwą miesiąca), to tę samą datę ale już w formacie ustandaryzowanym należy podać w atrybucie datetime="..."
.
Przykład <time datetime>
<time datetime="1980-01-01 09:00">1 stycznia 1980, godz. 9.00</time>
Format daty i czasu
- miesiąc
- 2011-11
- data
- 2011-11-12
- 11-12 (każdy 12 listopada)
- czas
- 14:54
- 14:54:39
- 14:54:39.92922
- data i czas lokalny
- 2011-11-12T14:54
- 2011-11-12T14:54:39
- 2011-11-12T14:54:39.92922
- 2011-11-12 14:54
- 2011-11-12 14:54:39
- 2011-11-12 14:54:39.92922
- strefa czasowa
- Z, +0000, +00:00 (czas UTC)
- +0100, +01:00 (czas zimowy w Polsce)
- +0200, +02:00 (czas letni w Polsce)
- -0800, -08:00
- data i czas ze strefą czasową
- 2011-11-12T14:54Z
- 2011-11-12T14:54:39Z
- 2011-11-12T14:54:39.92922Z
- 2011-11-12T14:54+0000
- 2011-11-12T14:54:39+0000
- 2011-11-12T14:54:39.92922+0000
- 2011-11-12T14:54+00:00
- 2011-11-12T14:54:39+00:00
- 2011-11-12T14:54:39.92922+00:00
- 2011-11-12T06:54-0800
- 2011-11-12T06:54:39-0800
- 2011-11-12T06:54:39.92922-0800
- 2011-11-12T06:54-08:00
- 2011-11-12T06:54:39-08:00
- 2011-11-12T06:54:39.92922-08:00
- 2011-11-12 14:54Z
- 2011-11-12 14:54:39Z
- 2011-11-12 14:54:39.92922Z
- 2011-11-12 14:54+0000
- 2011-11-12 14:54:39+0000
- 2011-11-12 14:54:39.92922+0000
- 2011-11-12 14:54+00:00
- 2011-11-12 14:54:39+00:00
- 2011-11-12 14:54:39.92922+00:00
- 2011-11-12 06:54-0800
- 2011-11-12 06:54:39-0800
- 2011-11-12 06:54:39.92922-0800
- 2011-11-12 06:54-08:00
- 2011-11-12 06:54:39-08:00
- 2011-11-12 06:54:39.92922-08:00
- tydzień
- 2011-W46 (46-ty tydzień 2011 roku)
- rok
- 2011
- czas trwania
- PT4H18M3S (4 godziny 18 minut 3 sekundy)
- 4h 18m 3s
Generator daty i czasu HTML5
Do stworzenia znacznika <time datetime="...">...</time>
z poprawnym formatem daty i czasu możesz się posłużyć poniższym generatorem:
Przeglądarki
Chrome | Firefox | Edge | Opera | Safari | |
---|---|---|---|---|---|
<time> | 62 2017-10-17 | 22 2013-06-25 | 14 2016-08-02 | 49 2017-11-08 | 7 2013-10-22 |
<time datetime> | 62 2017-10-17 | 22 2013-06-25 | 14 2016-08-02 | 49 2017-11-08 | 7 2013-10-22 |