Тег <time>
Описание
Тег <time> представляет дату, время или продолжительность в машиночитаемом формате. Это семантический элемент HTML5, который улучшает обработку временных данных поисковыми системами и скринридерами.
<time datetime="2025-05-18">18 мая 2025</time>
<!-- Дата -->
<p>Событие состоится <time datetime="2025-12-31">31 декабря 2025 года</time></p>
<!-- Время -->
<p>Начало в <time datetime="19:30">19:30</time></p>
<!-- Дата и время -->
<p>Публикация: <time datetime="2025-05-15T08:00+03:00">15 мая, 8:00 МСК</time></p>
<!-- Продолжительность -->
<p>Длительность: <time datetime="PT2H30M">2 часа 30 минут</time></p>
<!-- Только машиночитаемый формат -->
<p>Дата релиза: <time datetime="2025-Q3">третий квартал 2025</time></p>
Ключевые особенности:
- Поддерживает различные форматы дат и времени (ISO 8601)
- Может содержать человекочитаемый текст
- Не изменяет визуальное отображение по умолчанию
- Улучшает микроразметку для SEO
- Полезен для календарей, событий, публикаций
Стилизация через CSS:
<style>
time {
font-weight: bold;
color: #2c3e50;
}
.event-date {
background-color: #e8f4fc;
padding: 3px 6px;
border-radius: 4px;
border-left: 3px solid #3498db;
}
/* Иконка календаря перед датой */
time::before {
content: "📅 ";
font-size: 0.9em;
}
</style>
<p>Следующее собрание: <time datetime="2023-06-20T14:00" class="event-date">20 июня в 14:00</time></p>
Рекомендации по использованию:
- Всегда указывайте атрибут
datetimeдля точных данных - Для относительных дат используйте
"data-*"атрибуты - Сочетайте с микроразметкой Schema.org
- Не используйте для чисто декоративных целей
- Для сложных временных расчетов применяйте JavaScript
<div itemscope itemtype="http://schema.org/Event">
<h2 itemprop="name">Конференция</h2>
<p>
Дата: <time itemprop="startDate" datetime="2023-11-15T09:00">15 ноября 2023, 9:00</time>
</p>
<p>Продолжительность: <time itemprop="duration" datetime="PT8H">8 часов</time></p>
</div>
Тег <time> обеспечивает семантически правильное представление временных данных, улучшая их обработку браузерами, поисковыми системами и вспомогательными технологиями.
Атрибуты
| datetime | Дата/время в машиночитаемом формате |
| accesskey | Горячая клавиша для активации |
| class | CSS-классы для стилизации |
| contenteditable | Разрешает редактирование |
| data-* | Пользовательские данные |
| dir | Направление текста |
| hidden | Скрывает элемент |
| id | Уникальный идентификатор |
| lang | Язык содержимого |
| style | Инлайновые стили |
| tabindex | Порядок перехода |
| title | Всплывающая подсказка |
| translate | Определяет возможность перевода |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 9.0 | 8.0 | 9.2 | 4.0 | 5.0 |