Invalid RSS feed!

HTML5 <time> elem

-

A <time> elem használatával szemantikus módon adhatjuk meg az időt, úgy hogy mindaz értelmezhető lesz a felhasználóink és a keresők számára egyaránt!

A <time> elem először 2009-ben került bele a HTML5 specifikációba, ahol aztán 2011-ben lecserélték a <data> elemre. Ezután visszahozták újra a <time>-ot fejlettebb formában.

<time> elem fontossága a szemantikában rejlik. Ha a HTML5-ben használatos tageket használjuk az oldalunk kialakítása során, akkor az nem csak a végfelhasználónak lesz értelmezhető, hanem a keresőknek is (szemben a szimpla div-es kialakítással, plusz mikróadatok nélkül). Amennyiben egy <article> elemet <time> elemmel látunk el, úgy a keresők tudni fogják, hogy az adott cikken belül melyik elem tartalmazza a dátumot – a Google ezt a dátumot megjeleníti a találati listájában, ami hasznos lehet, ha valaki friss tartalmat keres.

A <time> elemet a böngésző inline elemként értelmezi! A támogatottsága nagyon jó, mint a többi HTML5 elemnek!

Használat

A legegyszerűbb használathoz csupán egy hagyományos dátum formátumot kell elhelyeznünk a nyitó és záró címkénk közé!

<time>2015-05-10</time>

A fenti kódrészlet egy megfelelően használt, ám nagyon egyszerű <time> elemet mutat be. A címke használata ebben a formában elég korlátozott a dátum típusa miatt! Szerencsére, a datetime tulajdonság segítségével tetszőleges formázást adhatunk meg a végfelhasználó számára, úgy hogy gépeknek/programoknak hagyományos, szabványos formátumot adhatunk!

<time datetime="2015-05-11">11.05.2015.</time>
<time datetime="2015-05-11">holnap</time>

A fenti kódok mindegyike helyes! Nem számít, hogy mit adunk meg a felhasználóknak, ha programoknak a datetime segítségével szabványos dátumot adunk meg!

pubdate tulajdonság

A specifikáció első részében szerepelt a pubdate tulajdonság, amivel jelezhettük, hogy az adott dátum a szülő <article> elem közzétételi dátuma. Jelenleg azonban ez a tulajdonság nem része a szabványnak, így a legegyszerűbb – ha szükségünk van a publikálási dátum kiemelésére -, akkor használjuk a BlogPosting scheme-et.

<article>
    <h1>Cím</h1>
    <p>A bejegyzés tartalma!</p>
    <time datetime="2015-05-10" pubdate>2015.05.10.</time>
</article>

Idő jelölése

A címkével nem csupán dátumot, hanem időpontot is jelölhetünk! A szabványos jelölés a következő: HH:MM[:SS[.mmm]]

  • H – órák
  • M- percek
  • S – másodperek
  • m – ezredmásodperc
  • […] – opcionális elemek

A használata megegyezik az előzőleg bemutatott dátum jelölésével!

<time>16:10:20</time>
<time datetime="12:00">dél</time>

Dátum és idő összefűzése

Akár megadhatunk dátumot és időt is egyszerre! Ilyenkor a dátumot egy nagy T betűvel kell elválasztanunk az időtől!

<time datetime="2015-05-10T10:05:30">Vasárnap, 10:30</time>

Összefoglalás

<time> elem egy egyszerű és hatékony módja annak, hogy az oldalunk egy kicsit szemantikusabb legyen! A címkének köszönhetően a keresők többet látnak az oldalunkból anélkül,hogy segítségül hívnánk a schema.org valamelyik sablonját! A fent leírtak mellett még sok egyéb dolgot konfigurálhatunk a dátum/idő párossal kapcsolatban! Ha szeretnénk többet megtudni, akkor keressük fel a W3 oldalát!

Szolgáltatások

Full-stack webfejlesztés

01.

Egyedi weboldalt szeretnél?

WordPress CMS-el fejlesztve megvalósítjuk elképzeléseid. Készítünk egy modern oldalt, amivel felveheted a versenyt a konkurenciával.

02.

Komplex webes ötleted van?

Teljes körű alkalmazásfejlesztési szolgáltatást nyújtunk, amennyiben van egy olyan ötleted, vagy terved, ami nem valósítható meg kész megoldásokkal.