Что делает тег

Тег <time> используется для отображения даты и времени на веб-странице. Он помогает браузерам и другим программам понимать, какой контент является датой или временем, и облегчает обработку этой информации.

Синтаксис тега <time>

<time datetime="2023-03-13T12:00:00Z">13 марта 2023 года</time>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <time> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

Примеры использования

Указание конкретной даты и времени:

<p>Этот текст написан <time datetime="2023-03-13T15:30:00+03:00">13 марта 2023 в 15:30</time></p>

Обозначение периода времени:

<p>Работа над этим проектом займёт около <time datetime="PT10H">10 часов</time>.</p>

Показ текущей даты и времени. Здесь с помощью JavaScript задаётся время, которое будет показываться в теге <time>:

<p>Текущая дата и время: <time></time></p>
<script>
  document.querySelector('time').textContent = new Date().toLocaleString();
</script>

Для чего использовать тег <time>

  • Показать текущую дату или время.
  • Показать дату или время какого-то события.

Атрибуты тега <time>

datetime — указывает дату и время, связанные с элементом.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Для использования тега <time> нет никаких ограничений.

Нюансы

  • Дата и время, указываемые в атрибуте datetime, должны быть в формате ISO 8601.
  • Тег <time> неуместен, если точные дата и время неизвестны.

Поддержка браузерами

Тег <time> поддерживается всеми современными браузерами. Актуальная информация — на caniuse.

Альтернативные теги

Альтернативных тегов для тега <time> не существует.

Чем заменить тег

Заменить тег можно только сочетанием других тегов, таких как <span>, <div>, <p>, с указанием атрибута datetime. Однако это усложнит разметку и сделает её менее читабельной.

Актуальность

Тег <time> не устарел, можете использовать его в веб-разработке.


Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<ul>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023