Атрибут datetime тега <time> — машинна дата й час

Атрибут datetime тега <time> встановлює дату чи час або обидва значення для тексту.

Вміст атрибута datetime призначений для пошукових систем, тому безпосередньо в браузері не відображається.

правити

Загальний опис

правити

Нотатка

Дата і час задається в міжнародному форматі ISO 8601

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

<time datetime="YYYY-MM-DDThh:mm:ssTZD">

Атрибут datetime може отримувати 2 значень:

YYYY-MM-DDThh:mm:ssTZD

Вказує дату і час для тексту. Пояснення компонентів:

YYYY - рік (наприклад, 2009) MM - місяць (наприклад, 01 для січня) DD - день місяця (наприклад, 08) T або пробіл - роздільник (потрібно, якщо зазначено час. Для розділення дати та числа) hh- годину (наприклад, 22 для 10:00 вечора) mm- хвилини (наприклад, 55) ss- секунди (наприклад, 03) TZD - Номенклатурний часовий пояс (Z позначає Zulu, також відомий як середній час за Гринвічем)

автор: NagarD

правити

PTDHMS

P - Період І - День H - Години M - Хвилини S - Секунди

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	62	22	7	49	14	—

Підтримка: мобільні переглядачі

Переглядач
	62	62	22	4

Приклади

+ запропонувати свій приклад у пісочниці

<p class="head">Як це виглядає звичайно — різниці немає жодної</p>
<p>Опубліковано <time datetime="2026-08-03">3 серпня</time>,
   оновлено <time>3 серпня</time>.</p>

<p class="head">Те саме правило, але з показаним вмістом атрибута</p>
<ul class="reveal">
    <li>Дата: <time datetime="2026-08-03">3 серпня</time></li>
    <li>Дата з часом: <time datetime="2026-08-03T14:30">3 серпня о 14:30</time></li>
    <li>Час із поясом: <time datetime="2026-08-03T14:30:00+03:00">за київським часом</time></li>
    <li>Місяць: <time datetime="2026-08">серпень</time></li>
    <li>Тиждень: <time datetime="2026-W32">32-й тиждень</time></li>
    <li>Тривалість: <time datetime="PT2H30M">2 год 30 хв</time></li>
    <li class="wrong">Хибний формат: <time datetime="03.08.2026">3 серпня</time></li>
    <li class="wrong">Без атрибута: <time>3 серпня</time></li>
</ul>

.head {
    margin: 20px 0 6px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.reveal {
    max-width: 540px;
    padding-left: 20px;
    line-height: 1.9;
}

.reveal time {
    padding: 1px 4px;
    border-radius: 3px;
    background: #eef3fb;
}

.reveal time::after {
    color: #1b4f9c;
    font-family: ui-monospace, monospace;
    font-size: .85em;
    content: " [" attr(datetime) "]";
}

.reveal time:not([datetime])::after {
    color: #c0392b;
    content: " [атрибута немає — датою вважається сам текст]";
}

.wrong time {
    background: #fdeeee;
}

.wrong time::after {
    color: #c0392b;
}

<p>У лютому святкуємо <time datetime="2026-02-14">День святого Валентина</time>.</p>