HTML-тег <time>
Тег <time>, новый элемент HTML 5, используется для обозначения времени в 24-часовом формате или точной даты по григорианскому календарю.
Тег <time> является одним из элементов HTML5. Он разметает момент или промежуток времени таким образом, чтобы они были понятны как людям, так и машинам. Тег может представлять одно из следующего:
- время в 24-часовом формате, понятное человеку,
- точную дату по григорианскому календарю (с необязательными сведениями о часовом поясе и времени),
- продолжительность.
Тег <time> не следует использовать для дат, предшествующих введению григорианского календаря.
Зачем использовать <time>? Машиночитаемый аспект
Видимый текст внутри элемента <time> остаётся свободным и понятным человеку — можно написать «В следующую пятницу», «28 сентября» или «через два часа». Необязательный атрибут datetime содержит строгую, машиночитаемую версию того же момента, чтобы программное обеспечение могло точно его интерпретировать:
- Поисковые системы читают
datetimeдля формирования более умных, учитывающих время результатов (например, отображение дат событий в расширенных сниппетах). - Инструменты календаря и браузеры могут предлагать напоминания «добавить в календарь», потому что знают точный момент, а не просто слова.
- Скрипты и вспомогательные технологии могут надёжно переформатировать, локализовать или сравнивать значение.
Если атрибут datetime опущен, текстовое содержимое элемента само по себе должно быть допустимой строкой даты/времени — в этом случае элемент не должен содержать вложенных элементов, только текст.
Синтаксис
Элемент <time> требует как открывающего, так и закрывающего тега. Содержимое записывается между открывающим тегом <time> и закрывающим тегом </time>.
Пример HTML-тега <time>:
HTML-тег <time>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<p>The game will be held on <time datetime="2018-09-28T19:00">September 28</time>.</p>
<p>It will start at <time>19:00</time></p>
</body>
</html>В первом абзаце атрибут datetime содержит точное машинное значение, а видимый текст отображает «September 28». Во втором абзаце атрибут datetime отсутствует, поэтому текст 19:00 сам является машиночитаемым значением.
Форматы datetime
Атрибут datetime должен содержать допустимую строку даты/времени в соответствии с конвенциями ISO 8601, используемыми в HTML. Ниже приведены распространённые форматы, готовые для копирования:
| Что представляет | Пример значения | Примечания |
|---|---|---|
| Дата | 2024-03-15 | Год-Месяц-День. |
| Год и месяц | 2024-03 | День опущен. |
| Только время | 14:30 | 24-часовой формат, необязательные :ss. |
| Дата и время (UTC) | 2024-03-15T14:30:00Z | T разделяет дату и время; Z означает UTC. |
| Дата и время со смещением | 2024-03-15T14:30:00+02:00 | Смещение часового пояса от UTC. |
| Продолжительность | PT2H30M | «2 часа 30 минут». |
| Продолжительность (дни) | P2D | «2 дня». |
| Неделя | 2024-W11 | 11-я ISO-неделя 2024 года. |
Продолжительность всегда начинается с P (период); T предшествует временным компонентам, поэтому PT2H30M читается как 2 часа и 30 минут, а P2D — как 2 дня.
Пример: значение только со временем
Здесь видимый текст также является машинным значением, поэтому атрибут datetime не нужен.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<p>Doors open at <time>09:00</time> sharp.</p>
</body>
</html>Пример: продолжительность
Используйте атрибут datetime со значением P/PT, чтобы обозначить, как долго длится что-либо.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<p>The recipe needs <time datetime="PT2H30M">2 hours and 30 minutes</time> in the oven.</p>
</body>
</html>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| datetime | YYYY-MM-DD, YYYY-MM-DDThh:mm, hh:mm и др. | Задаёт время/дату в машиночитаемом формате. Значение должно соответствовать допустимому формату строки даты/времени (например, ISO 8601). Смещения часового пояса вроде +02:00 или Z также поддерживаются. |
Тег <time> также поддерживает глобальные атрибуты.
Примечание: атрибут pubdate ранее поддерживался, но был объявлен устаревшим и удалён в последующих спецификациях HTML.
Стилизация <time>
Элемент <time> является строчным и по умолчанию не имеет стилей, поэтому выглядит как окружающий текст. Полезный приём — селектор атрибута time[datetime], который нацелен только на элементы, содержащие машиночитаемое значение, — например, для отображения точного значения при наведении через title или для придания таким моментам тонкого визуального акцента.
/* Highlight only <time> elements that have a datetime attribute */
time[datetime] {
border-bottom: 1px dotted currentColor;
cursor: help;
}Связанные теги
- HTML-тег
<data>— универсальный аналог для машиночитаемых значений, не связанных со временем. - Справочник элементов HTML5 — полный список элементов, введённых в HTML5.