Елемент HTML
Елемент <time> являє собою дату, час або період часу, представлені в машинно-читаному форматі. Він може бути корисним для створення розкладів, архівів або інших функцій, пов'язаних з часом. WordPress використовує цей елемент у базовій темі оформлення. Ще один приклад використання <time> - Reddit:
коротка історія
Життєвий шлях цього елемента був нелегким. Його додали до специфікації HTML5 у 2009 році. Через два роки, в 2011, його прибрали і замінили на набагато ширший <data>. Однак цього ж року його повернули та додали нових можливостей. Нині його можна впевнено використати.
Ситуацію добре описав Брюс Лоусон (прибрали, повернули, стан справ). [Та сама історія на Хабрі: прибрали, повернули]. Класичний приклад того, як реакція спільноти розробників впливає розвиток HTML.
Тег та атрибут
У цьому прикладі текст усередині тега є валідним значенням атрибута datetime (про який докладніше йтиметься далі). Однак це абсолютно необов'язково. Це значення можна перемістити в атрибут, вказаний явно, а всередині тега використовувати довільний текст:
Саме атрибут datetime надає цьому елементу його унікальних властивостей. Він представляє в машинночитаному вигляді будь-яку дату, верм'я або інтервал, що відноситься до тексту всередині тега. Оскільки він призначений для комп'ютерів, його формат жорстко визначено.
У більшості випадків текст, укладений у тег, представляє той самий час у легкочитаному вигляді:
10 способів вказівки часу
Існує безліч різновидів форматування datetime.
Рік та місяць
Дуже просто: рік іде перед місяцем.
Рік, потіммісяць, а потім день.
Дата без року
Місяць, а потім день.
Тільки час
Годинник, хвилина, секунда. Секунди вказувати необов'язково. Частки секунди вказуються точно до третього знака.
дата та час
Комбінація дати та часу, розділених заголовною «T». Літеру «T» можна замінити на пробіл.
Часовий пояс
Починається з плюсу чи мінусу. Двокрапка необов'язково. Світовий координований час (UTC, +00:00) можна замінити великою «Z».
Місцева дата та час
Дата та час із зазначенням часового поясу, замість «T» можна використовувати пробіл.
Рік та тиждень
Рік, потім велика «W» і номер тижня.
Лише рік
Має бути чотири або більше цифр. Приклади коректних значень: "0001", "12345".
Тимчасовий інтервал (перший спосіб)
"P", потім опціонально - кількість днів, "T", потім опціонально - кількість годин, хвилин та секунд. Усі літери лише у верхньому регістрі.
Тимчасовий інтервал (другий спосіб)
Тижні, дні, хвилини, секунди. Літери можуть бути в будь-якому регістрі, прогалини необов'язкові.
Проблеми з форматування datetime?
Ця невелика форма на CodePen допоможе перетворити значення дати та часу на коректний тег <time> :
Підтримка у брузерах
елемент <time> не має проблем із підтримкою в браузерах. Якщо браузер знайомий з елементом, він його обробить, якщо ні - сприйме його як невідомий inline-елемент, що нас цілком влаштовує. Так само легко доступний і атрибут datetime.
Є ще DOM-інтерфейс, пов'язаний з елементом <time> . Через посилання на елемент можна отримати значення dateTime:
Проте його підтримка є тільки в Firefox, та й користі відйого мало, тому що він просто повертає значення атрибута datetime, причому він навіть не вміє розпізнавати коректні значення часу всередині тега, що було б досить логічно.
У чому переваги використання <time>?
Тут я процитую Брюса Лоусона, тому що, мабуть, краще і не скажеш:
Варіанти використання однозначної вказівки дати вигадати неважко. Браузер може запропонувати користувачеві додати подію на сторінці до його календаря. Браузер у Таїланді може автоматично перетворити дату в григоріанському календарі на традиційний буддійський. Японський браузер може показати <time>16:00</time> як «16:00h». Агрегатори контенту можуть автоматично генерувати часову шкалу подій.
Ще одна корисна дрібниця
А ось приклад коду для Rails, який виводить час у цих трьох видах:
Хардкорна конфа за С++. Ми запрошуємо лише профі.
Читають зараз
Верстка: перехід до семантичної розмітки - головна мета HTML
Використання розмітки schema.org для логотипів організацій
Багато нового про семантичну розмітку від Яндекса
Коментарі 33
Існує безліч різновидів форматування datetime.
При форматах, що описані тут, є спрямовані на додаток до відповідних форматів ISO8601, це specification defines parsing rules in all more detail than ISO8601. Implementors є thefore encouraged to carefully examine any date parsing libraries перед використанням до здійснення parsing rules described below; ISO8601 libraries не можуть перевищувати періоди часу і часу в тому ж самому manner. пруф
Прикол у тому, що модну фішку з визначенням рангу заголовків за вкладеністю за фактом визналипровалилася
Хто? Я використовую у кожній секції
треба випиляти хелпер time_tag із rails. зачем он =), можна написати ось так:
У статті ще не вказано про величезну користь правильного використання даного тега для A11y – доступності контенту. І тут справа навіть не тільки в користувачах з обмеженнями. Клієнтське (користувацьке) програмне забезпечення, яке використовує контент веб-сторінок, може бути найрізноманітнішим. Це можуть бути як звичайні веб-браузери та браузери призначені для людей з обмеженими можливостями, так і будь-які інші корисні та спеціалізовані програми/пристрої (плеєри/читалки/холодильники/телевізори тощо).
У статті було чітко помічено, про те, що тег надає автоматично як мінімум три види уявлення часу, один з яких дуже універсальний і доступний - У машиночитаному форматі.
Семантично правильно побудовані сторінки відразу стають доступнішими для більшого кола користувачів, браузерів, краулерів та багато іншого. Наприклад (як грубий приклад), сайт новин, може обійтися без RSS, якщо його каталог новин побудований з урахуванням сучасних можливостей семантичної розмітки контенту. Так само можна сказати про каталог подкастів, каталог продуктів і т.д.
Японський браузер може показати 16:00 як «16:00».