В HTML есть два редких элемента:
<time> и <data>. Первый ещё можно встретить в разметке, где думают о семантике. Второй практически не встретить. Оба элемента объединяет возможность добавления машиночитаемых данных.<time> предназначен для разметки дат, времени, временных зон и длительностей в формате ISO 8601. Это международный стандарт, который могут распознавать различные системы. Вот несколько примеров:<!-- дата с годом -->
<time>2025-11-14</time>
<!-- месяц и день без года -->
<time>11-14</time>
<!-- время без секунд -->
<time>17:03</time>
<!-- дата и время с секундами -->
<time>2025-11-14T17:03</time>
<!-- временная зона -->
<time>+0300</time>
<!-- длительность -->
<time>2h 13m 42s</time>
Стандарт HTML говорит, что текст внутри
<time> должен соответствовать формату (по сути ISO 8601). Если это не так, то дата/время/длительность в нужном формате должна быть указана в атрибуте datetime. Это позволяет парсить данные.<!-- валидная строка по ISO 8601 -->
<time>2025-11-14 17:03</time>
<!-- невалидная строка по ISO 8601,
но валидная указана в атрибуте -->
<time datetime="2025-11-14 17:03">
Четверг, 14 ноября, 17:03
</time>
Атрибут позволяет сохранить машиночитаемые данные для поисковых роботов, ИИ, и других потребителей, а пользователям показывать человекочитаемые данные или относительные значения «вчера», «5 минут назад», «на прошлой неделе».
У
<data> похожая задача: показать человекочитаемые данные и предоставить машиночитаемую альтернативу. Разница в том, что <data> не привязан ни к какому стандарту и формату, поэтому принимает произвольные данные.Человекочитаемый контент указывается внутри элемента, а машиночитаемая альтернатива в атрибуте
value.<!-- даты допустимы, но лучше
использовать <time> -->
<p>
Дата публикации:
<data value="2025-11-14">
Четверг, 14 ноября 2025
</data>
</p>
<!-- идентификатор, модель, артикул,
SKU, или url handle товара -->
<h2>
<data value="GA-B419SWGL">
Холодильник LG GA-B419SQGL
</data>
</h2>
<!-- код валюты в ISO 4217
и неформатированная цена -->
<p>
Price:
<data value="USD">$</date>
<data value="119999">1.199,99</data>
</p>
<!-- Price: $1.199,99 -->
Есть ведь универсальные
data-* атрибуты, которые можно использовать для хранения машиночитаемых данных у любых элементов? Это так, но они семантически нейтральные, в отличие от datetime у <time> и value у <data>.Добавление
data-* атрибута не значит, что это машиночитаемые данные, которые связаны с контентом. Это просто произвольные данные. <time datetime> и <data value> обладают конкретной семантикой.Может показаться, что элементы помогут программам чтения с экрана правильно обработать данные. Предположение логичное, но ложное.
<time> и <data> — элементы со встроенной ролью generic, поэтому работают как <span>.Возможно, со временем поддержка семантических элементов уровня текста во вспомогательных технологиях улучшится. Тогда
<time> и <data> будут предоставлять дополнительный контекст. А пока у
<time> и <data> есть только теоретическая польза. Также они могут быть полезны для считывания и обработки в JS, как альтернатива data-* атрибутам. Для ИИ и парсеров контент тоже будет чуть более понятным.#ydkhtml
