Атрибут datetime тега <ins> — дата й час вставки тексту
Атрибут datetime HTML тега <ins> встановлює дату і час редагування тексту.
Загальний опис
автор: NagarD
Синтаксис
<ins datetime="YYYY-MM-DDThh:mm:ssTZD">Атрибут datetime може отримувати єдине значення:
-
YYYY-MM-DDThh:mm:ssTZD -
Вказує дату і час, коли був вставлений текст / змінений. Пояснення компонентів:
- YYYY - рік (наприклад, 2009)
- MM - місяць (наприклад, 01 для січня)
- DD - день місяця (наприклад, 08)
- T або пробіл - роздільник (потрібно, якщо зазначено час. Для розділення дати та числа)
- hh- годину (наприклад, 22 для 10:00 вечора)
- mm- хвилини (наприклад, 55)
- ss- секунди (наприклад, 03)
- TZD - Номенклатурний часовий пояс (Z позначає Zulu, також відомий як середній час за Гринвічем)
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута datetime теґа <ins>
<h3>Приклад використання атрибуту <code>datetime</code></h3>
<p>Вдень 27 червня очікується сонячна погода, без опадів буде до <ins cite="https://ua.sinoptik.ua/погода-тернопіль" datetime="2019-24-06T23:31:05+07:00">+27</ins> <del cite="https://ua.sinoptik.ua/погода-тернопіль">+25</del> градусів тепла.</p>Спершу звичайна пара <del> і <ins> — на вигляд атрибут datetime не додає нічого. Далі правило ins::after виводить його вміст через attr(datetime), і стає видно, що прочитає машина: правильні форми, хибний формат «03.08.2026» і рядок узагалі без атрибута.
HTML
<p class="head">Як це виглядає звичайно</p>
<p>Ціна квитка — <del datetime="2026-08-03T09:15:00+03:00">120 грн</del>
<ins datetime="2026-08-03T09:15:00+03:00">90 грн</ins>. Різниці між рядком з атрибутом
і без нього немає жодної.</p>
<p class="head">Те саме правило, але з показаним вмістом атрибута</p>
<ul class="reveal">
<li>День: <ins datetime="2026-08-03">додано абзац</ins></li>
<li>Дата з часом: <ins datetime="2026-08-03T14:30">додано виноску</ins></li>
<li>З часовим поясом: <ins datetime="2026-08-03T14:30:00+03:00">додано приклад</ins></li>
<li>Всесвітній час: <ins datetime="2026-08-03T11:30:00Z">те саме, інакше записане</ins></li>
<li>Пара з вилученням: <del datetime="2026-08-03T14:30:00+03:00">старий рядок</del></li>
<li class="wrong">Хибний формат: <ins datetime="03.08.2026">браузер мовчить</ins></li>
<li class="wrong">Без атрибута: <ins>невідомо коли</ins></li>
</ul>
<p class="head">ins огортає й цілі абзаци</p>
<ins datetime="2026-08-03" class="block">
<p>Цей абзац доданий цілком — теґ лишається рядковим, але вміщує блоки.</p>
</ins>CSS
.head {
margin: 22px 0 6px;
color: #5a6472;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
p {
max-width: 560px;
}
.reveal {
max-width: 620px;
padding-left: 20px;
line-height: 2;
}
ins {
background: #f0f8f1;
}
del {
background: #fdeeee;
}
.reveal ins::after,
.reveal del::after {
color: #1b4f9c;
font-family: ui-monospace, monospace;
font-size: .85em;
content: " [" attr(datetime) "]";
}
.reveal ins:not([datetime])::after {
color: #c0392b;
content: " [атрибута немає — коли саме, невідомо]";
}
.wrong ins::after {
color: #c0392b;
}
.block {
display: block;
max-width: 620px;
padding: 4px 12px;
border-left: 4px solid #3a9a4f;
}Коментарі
Коментарів ще немає — будьте першим!