Тег <time>

Тег <time> (укр. — “час”) в HTML використовується для позначення дат, часу або тривалості у стандартизованому форматі. Він надає можливість як людині, так і машині (пошуковикам, скрінрідерам, календарям, парсерам) правильно інтерпретувати значення дати або часу.

Атрибути

Специфічні атрибути

  • datetime — задає значення дати, часу або тривалості у стандартизованому форматі ISO 8601. Наприклад:
    Декілька прикладів форматів ISO 8601 для datetime:
    • Дата: 2025-06-16
    • Дата й час: 2025-06-16T14:30
    • Тривалість: PT2H30M (2 години 30 хвилин)
<time datetime="2025-06-16">16 червня 2025</time>

Глобальні атрибути

Тег <time> підтримує всі глобальні атрибути HTML:

  • id — унікальний ідентифікатор. Наприклад:
<time id="meeting-date" datetime="2025-06-16">16 червня 2025</time>
  • class — для CSS-стилізації. Наприклад:
<time class="event-time" datetime="14:00">14:00</time>
  • style — для інлайн-стилів. Наприклад:
<time style="color: green;" datetime="2025-06-16">16.06.2025</time>
  • title — підказка при наведенні. Наприклад:
<time title="Дата події" datetime="2025-06-16">16 червня 2025</time>
  • lang — мова текстового вмісту. Наприклад:
<time lang="uk" datetime="2025-06-16">16 червня 2025</time>

Приклад використання

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад використання time</title>
    <style>
        time {
            font-weight: bold;
            color: darkblue;
        }
    </style>
</head>
<body>
    <h2>Розклад подій:</h2>

    <p>Наступна зустріч відбудеться <time datetime="2025-06-16">16 червня 2025 року</time>.</p>

    <p>Початок о <time datetime="2025-06-16T14:00">14:00</time>.</p>

    <p>Тривалість: <time datetime="PT2H30M">2 години 30 хвилин</time>.</p>
</body>
</html>

Додаткові моменти

  • Тег <time> допомагає пошуковим системам та машинним парсерам краще розуміти контекст дати або часу.
  • Значення в атрибуті datetime завжди записується у форматі ISO 8601.
  • Може використовуватись для подій, публікацій, розкладів, тривалостей, дедлайнів тощо.
  • Підвищує доступність контенту.
  • Може застосовуватись у мікророзмітці для SEO (schema.org).
  • Повністю підтримується усіма сучасними браузерами.