HTML značka `<time>`

HTML element <time>. Jak a proč ho použít na stránce.

17. září 2014

5 minut

Pro vyznačení, co na stránce je datum, čas nebo časový úsek, byla zavedena HTML značka <time>.

Z pohledu prohlížečů jde o řádkový povinně párový tag, který se nevyznačuje výrazně speciálním chováním, tudíž nemá skoro smysl řešit jeho funkčnost v prohlížečích (kromě IE 8, kde nepůjde stylovat).

Z pohledu návštěvníka se použití <time> prakticky neliší od neutrální řádkové značky <span>.

Využitelná je tedy tato značka zejména pro strojové zpracování.

Zápis

<time>
  17. září 2014
</time>

Protože výše uvedenému českému formátu data by nemusel stroj porozumět (i když například Google s tím nemá problém), existuje atribut datetime.

<time datetime="2014-09-17">
  17. září 2014
</time>

Atribut `datetime`

Do atributu pro strojově zpracovatelný datum/čas je potom možné zadávat různé věci. V zásadě jde použít totéž, co u <input>ů pro čas/datum.

Co se týče data, nejdelší použitelný zápis je:

2014-09-31T23:59:59+02:00

(pro vysvětlení klikněte na libovolnou část řetězce)

Z toho jde potom zjednodušováním vytvořit datum s časem bez časového pásma, samotný čas, samotný datum, samotný rok a měsíc nebo jen rok a podobně.

Zvláštní případ je potom určení týdne v roce:

2014-W23

Doba trvání

Nakonec jde do datetime zadat i dobu trvání. Ta může najít uplatnění třeba u znázornění délky videa nebo jiné doby trvání:

<time datetime="4d 3m 10s">
  4 dny, 3 minuty a 10 vteřin
</time>

Výše uvedený příklad by znázorňoval dobu trvání 4 dny (4d), 3 minuty (3m) a 10 vteřin (10s).

Ještě existuje druhý způsob zápisu:

P 4D T 3M 10S

Mezery mezi jednotlivými částmi jsou volitelné.

Využití

Kromě sémantického výzamu a teoreticky lepší strojové čitelnosti nejsou moc důvody element <time> používat.

Vyhledávače si z historických důvodů musí poradit i s prostým uvedením data mimo značku <time>, navíc v případě Google jde oblast s datem na stránce přímo vyznačit v Google Webmaster Tools (Vzhled vyhledávání → Zvýrazňovač dat).

Z pohledu JavaScriptového API značky <time> také není nic moc k disposici, kromě vlastnosti dateTime pro práci s atributem datetime.

Potenciál

Potenciál značka <time> ale možná má. Dají se představit případy užití, kdy by kombinaci s chytrým prohlížečem / operačním systémem mohla nabídnout něco víc. Třeba nabízet na základě hodnoty v <time> vytvoření události v kalendáři, na základě doby trvání třeba připravit zapnutí odpočítávání a podobně.