Елемент HTML <time>

      Елемент
<time>
являє собою дату, час або період часу, представлені в машінночітаемом форматі. Він може бути корисний для створення розкладів, архівів або інших функцій, пов'язаних з часом. WordPress використовує цей елемент в базовій темі оформлення. Ще один приклад використання
<time>
— Reddit:
 
 image
 
 

Коротка історія

Життєвий шлях цього елемента був нелегким. Його додали в специфікацію HTML5 в 2009 році. Два роки по тому, в 2011, його прибрали і замінили на набагато більш широкий & ltdata>. Проте в цьому ж році його повернули і додали нових можливостей. Зараз його можна впевнено використовувати.
 
Ситуацію добре описав Брюс Лоусон (прибрали , повернули , поточний стан справ ). [Та ж історія на Хабре: прибрали , повернули ]. Класичний приклад того, як реакція спільноти розробників впливає на розвиток HTML.
 
 

Тег і атрибут

 
<time>
можна використовувати як звичайний тег HTML. Ось простий приклад, який представляє листопада 2011:
 
 
<time>2011-11</time>

У цьому прикладі текст всередині тега є валідним значенням атрибута
datetime
(про який детальніше піде мова далі). Проте це абсолютно необов'язково. Це значення можна перемістити в атрибут, зазначений явно, а всередині тега використовувати довільний текст:
 
 
<time datetime="2011-11">A cold winter month many years ago</time>

Саме атрибут
datetime
надає цьому елементу його унікальні властивості. Він представляє в машінночітаемом вигляді будь-яку дату, вермя або інтервал, що відноситься до тексту всередині тега. Так як він призначений для комп'ютерів, його формат жорстко визначений.
 
У більшості випадків текст, укладений в тег, представляє той же самий час в зрозумілому людині вигляді:
 
 
<time datetime="2011-11">November, 2011</time>

 
 

10 способів вказівки часу

Існує безліч різновидів форматування
datetime
.
 
 
Рік і місяць
 
2014-06

Дуже просто: рік іде перед місяцем.
 
 
Дата
 
1969-07-16

Рік, потім місяць, потім день.
 
 
Дата без року
 
12-31

Місяць, потім день.
 
 
Тільки час
 
14:54:39.929

Години, хвилини, секунди. Секунди вказувати необов'язково. Частки секунди вказуються з точністю до третього знака.
 
 
Дата і час
 
2013-11-20T14:54

Комбінація дати і часу, розділених заголовної «T». Букву «T» можна замінити на пробіл.
 
 
Часовий пояс
 
+06:00

Починається з плюса або мінуса. Двокрапка необов'язково. Всесвітній координований час (UTC, +00:00) можна замінити заголовної «Z».
 
 
Місцева дата і час
 
2019-12-31T23:59:59-02:00

Дата і час з вказівкою часового поясу, замість «T» можна використовувати пробіл.
 
 
Рік і тиждень
 
2010-W21

Рік, потім заголовна «W» і номер тижня.
 
 
Тільки рік
 
1776

Повинно бути чотири або більше цифр. Приклади коректних значень:
"0001"
,
"12345"
.
 
 
Часовий інтервал (перший спосіб)
 
P2DT2H30M10.501S

«P», потім опціонально — кількість днів, «T», потім опціонально — кількість годин, хвилин і секунд. Всі букви тільки у верхньому регістрі.
 
 
Часовий інтервал (другий спосіб)
 
1w 2d 2h 30m 10.501s

Тижні, дні, хвилини, секунди. Букви можуть бути в будь-якому регістрі, прогалини необов'язкові.
 
 

Приклади

 
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>.

 

Проблеми з форматування datetime?

Ця невелика форма на CodePen допоможе перетворити значення дати і часу в коректний тег
<time>
:
 
 
 
 

Підтримка в брузерах

У елемента
<time>
немає проблем з підтримкою в браузерах. Якщо браузер знайомий з елементом, він його обробить, якщо ні — сприйме його, як невідомий inline-елемент, що нас цілком влаштовує. Так само легко доступний і атрибут
datetime
.
 
Є ще DOM-інтерфейс пов'язаний з елементом
<time>
. Через посилання на елемент можна отримати значення
datetime
:
 
 
<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>

Однак його підтримка є тільки в Firefox, та й користі від нього мало, так як він просто повертає значення атрибута
datetime
, причому він навіть не вміє розпізнавати коректні значення часу усередині тега, що було б досить логічно.
 
 

У чому переваги використання & lttime>?

Тут я процитую Брюса Лоусона, так як, мабуть, краще і не скажеш:
 
 
Варіанти використання однозначного зазначення дати придумати неважко. Браузер може запропонувати користувачеві додати подію на сторінці в його календар. Браузер в Таїланді може автоматично перетворити дату в григоріанському календарі в традиційний буддійський. Японський браузер може показати
<time>16:00</time>
як «16:00 时». Агрегатори контенту можуть автоматично генерувати тимчасову шкалу подій.
 
Пошуковики можуть покращувати результати видачі. Наприклад, недавно був сильний снігопад, я погуглити і виявив, що школа, в яку ходять мої діти, сьогодні закрита. Тільки коли зі школи подзвонили і запитали, чому мої діти не прийшли, я виявив, що внизу сторінки з новиною про закриття школи написано дрібним шрифтом: «Опубліковано 5 січня 2008». Пошуковики цілком могли б розташовувати недавні події вище у видачі.
 

Ще одна корисна дрібниця

Ви можете ще трохи поліпшити елемент
<time>
, якщо додасте атрибут
title
, в якому вкажете більш детальну інформацію. Тобто дані про час можна представляти одразу в трьох видах:
 
     
У зручному для читання вигляді всередині тега;
 У більш докладному вигляді в підказці;
 У машінночітаемом форматі.
 
Цей прийом використовується на сайті CodePen:
 
 image
 
А ось приклад коду для Rails, який виводить час у цих трьох видах:
 
 
<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>

  
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.