Елемент time: дати й час

Але для програми це лише текст. За допомогою <time> можна явно вказати, що саме є датою, часом або тривалістю:

Текст між відкривальним і закривальним тегами призначений переважно для користувача, а значення datetime — для програм.

Синтаксис

Атрибут datetime необов’язковий, але зазвичай його варто використовувати:

Якщо datetime не вказано, текст усередині елемента сам повинен бути коректним значенням дати або часу:

Проте такий варіант менш зручний, якщо потрібно показати користувачу локалізований або природний текст:

<time> є семантичним елементом і не змінює вигляд тексту сам по собі.

Позначення дат

Для календарної дати використовується формат:

Наприклад:

Частини значення:

• YYYY — чотири цифри року;

• MM — місяць від 01 до 12;

• DD — день від 01 до 31.

Нулі на початку місяця та дня обов’язкові:

Можна позначати не лише повну дату, а й місяць:

Також існує формат календарного тижня:

На практиці найчастіше використовують повну дату або місяць.

Позначення часу

Час записують у 24-годинному форматі:

або з секундами:

Приклади:

Години, хвилини та секунди повинні містити по дві цифри:

Текст для користувача може мати інший вигляд, але значення datetime має відповідати формату HTML.

Дата й час разом

Дату і час можна об’єднати літерою T:

Також як роздільник дозволено використовувати пробіл:

Форма з T є поширеною та добре узгоджується з форматами, які використовують програми.

Часові пояси

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

Зсув часового поясу записують у форматі:

або:

Приклад:

Знак +03:00 означає, що місцевий час випереджає UTC на три години.

Для часу в UTC використовують суфікс Z:

Порівняймо:

Якщо часовий пояс важливий для правильного розуміння події, його слід додати до datetime і пояснити користувачу в тексті.

Позначення тривалості

Тривалість записують у форматі ISO 8601. Значення починається з літери P.

Найпоширеніші позначення:

• D — дні;

• H — години;

• M — хвилини;

• S — секунди;

• T — роздільник між днями та часом.

Приклади:

Літера T потрібна перед часовими одиницями:

Без T значення 2H15M не є правильним записом тривалості.

Тривалість відео, аудіо, уроку або події часто позначають саме так:

Тривалість не є моментом часу. Для неї не потрібно вказувати дату або часовий пояс.

Практичний приклад

Нижче наведено сторінку статті з датою публікації, датою оновлення, часом події та тривалістю читання.

У цьому прикладі:

• видимий текст адаптований для українського читача;

• datetime містить стандартизовані значення;

• для дати публікації вказано лише календарну дату;

• для онлайн-зустрічі вказано дату, час і часовий пояс;

• для часу читання використано тривалість.

Коли використовувати <time>

Елемент доречний для:

• дати публікації або оновлення;

• дати початку чи завершення події;

• часу зустрічі;

• дати дедлайну;

• тривалості відео, аудіо або уроку;

• року, місяця або календарного тижня;

• будь-якого іншого значення, яке програма може розпізнати як дату, час або тривалість.

Приклади:

Не слід використовувати <time> лише для будь-яких чисел:

Для такого тексту потрібні інші елементи або звичайний текст.

Видимий текст і datetime

datetime не зобов’язаний повторювати видимий текст посимвольно:

Однак такий запис варто використовувати обережно. Слово «сьогодні» з часом стане неправильним для користувача, хоча значення в datetime залишиться незмінним.

Краще показувати конкретну дату:

Якщо дата формується динамічно, сервер або JavaScript можуть оновлювати і видимий текст, і значення datetime.

Common mistakes

Використання локального формату в datetime

Атрибут datetime не повинен використовувати український локальний формат із крапками.

Правильно:

Відсутність початкових нулів

Правильно:

Плутанина між моментом часу та тривалістю

02:30 означає час доби — 2:30. Для тривалості потрібно використовувати PT2H30M:

Ігнорування часового поясу

Якщо подію переглядатимуть люди з різних часових поясів, краще явно записати зсув:

Використання <time> для стилізації

Не потрібно використовувати <time> лише для того, щоб застосувати CSS. Семантичні елементи слід вибирати за змістом, а не за зовнішнім виглядом.

Неправильний запис тривалості

Правильний формат:

Summary

• <time> семантично позначає дату, час або тривалість.

• Атрибут datetime містить машинно-читане значення.

• Повну дату записують у форматі YYYY-MM-DD.

• Час записують як HH:MM або HH:MM:SS.

• Дату й час можна поєднати через T.

• Для важливих подій варто вказувати часовий пояс, наприклад +03:00 або Z.

• Тривалість записують у форматі ISO 8601: PT45M, PT2H30M, P3D.

• Видимий текст може бути локалізованим і зручним для людини, а datetime — стандартизованим для програм.

• <time> не змінює вигляд тексту без CSS і не призначений для звичайних чисел або декоративного форматування.