HTML тег <time>html5

HTML теги

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

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

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

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

ТегChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
<time>html56.04.011.15.09.012.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 (часовой пояс):
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)

Атрибуты

АтрибутЗначениеОписание
datetimehtml5YYYY-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> (семантическая разметка и машиночитаемая дата).
Пример использования HTML тега <time> (семантическая разметка и машиночитаемая дата).

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

Нет.

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

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

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

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

HTML теги