HTML тег <time>

Значение и применение

Тег <time> представляет собой семантическую разметку. Внутри тега можно установить дату / время / период (или всё вместе) в удобном формате, а в атрибуте datetime html5 указать дату уже в машиночитаемом виде.

Машиночитаемая разметка используется поисковыми системами и пользовательскими браузерами, которые видят не какую-то нейтральную разметку, а данные, которые они могут идентифицировать.

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

Тег	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<time>	6.0	4.0	11.1	5.0	9.0	12.0

Синтаксис:

<time datetime = "YYYY-MM-DDThh:mm:ssTZD | PTDHMS"> </time>, где:

YYYY - год (например, 2016)
MM - месяц (например, 05 для Мая)
DD – день месяца (например, 11)
T или пробел - разделитель
hh - часы (например, 23)
mm - минуты (например, 57)
ss - секунды (например, 21)
TZD - Time Zone Designator (часовой пояс):

UTC (Coordinated Universal Time) - всемирное координированное время, обозначается буквой Z.
+hh:mm (использование локального часового пояса) например, -03:00 (отклонение от UTC)
-hh:mm (использование локального часового пояса) например, +03:00 (отклонение от UTC)

2016-12-31T12:00:00+03:00 - Декабрь 31, 2016 год, 12-00, Московское время.
2016-12-31T09:00:00Z - соответствуют тому же временному значению.

P - префикс для периода
T или пробел - разделитель
D - префикс для дней (например, 2D)
H - префикс для часов (например, 20H)
M - префикс для минут (например, 55M)
S – префикс для секунд (например, 5S)

Атрибуты

Атрибут	Значение	Описание
datetime	YYYY-MM-DDThh:mm:ssTZD PTDHMS	Представляет собой машиночитаемую дату / время в элементе.

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

Семантическая разметка:

<time> 17:00 </time> <!--значит 17:00-->

Машиночитаемая разметка:

Даты:

<time datetime="2016"> <!--значит 2016 год-->
<time datetime="2016-12"> <!--значит декабрь 2016 года --> 
<time datetime="2016-12-31">  <!--значит 31 декабря 2016 года --> 
<time datetime="12-31">  <!--значит 31 декабря любого года--> 
<time datetime="2017-W1"> <!--значит 1 неделя 2017 года -->

Даты и время:

<time datetime="2016-12-31T22:00">  <!--значит 31 декабря 2016 года в 10 вечера --> 
<time datetime="2016-12-31 22:00"> <!--также без T --> 
<time datetime="2016-12-31 22:45:50.777"> <!--с минутами, секундами и миллисекундами -->

Время:

<time datetime="07:00">  <!--значит 7 часов утра --> 
<time datetime="07:00-03:00"><!--значит 7 часов утра (UTC - Всемирное координированное время минус 3 часа --> 
<time datetime="08:00+03:00"> <!-- значит 7 часов утра (UTC - Всемирное координированное время плюс 3 часа) -->

Длительность:

<time datetime="P2D"> <!--длительность 2 дня --> 
<time datetime="PT20H25M"> <!--длительность 20 часов and 25 минут -->

Пример семантической и машиночитаемой разметки

<!DOCTYPE html>
<html>
<head>
	<title> Пример использования HTML тега <time></title>
<style> 
time {
background-color : lime; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<p> Мы запланировали вечеринку в <time datetime="2016-12-31 22:00"> Новый Год в 22:00 </time></p>
	</body>
</html>

Пример использования HTML тега <time> (семантическая разметка и машиночитаемая дата).

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги