Тег <data>: читаемая подпись и машинное значение
Data связывает видимый текст с машинным значением в атрибуте value. Он подходит, когда подпись удобна человеку, а код или числовая запись нужны для дальнейшей обработки.
Назначение
Data связывает видимый текст с машинным значением в атрибуте value. Он подходит, когда подпись удобна человеку, а код или числовая запись нужны для дальнейшей обработки.
Как это работает
Атрибут value не показывается автоматически и не проверяет формат данных. Для дат и времени существует time с datetime. Data не является полем формы и не отправляется как input с name.
Пример
<ul><li><data value="lesson-html-01">Первое знакомство с разметкой</data></li><li><data value="lesson-css-01">Первое оформление страницы</data></li></ul>Что должно получиться
Читатель видит названия уроков, а код может прочитать стабильные идентификаторы через value соответствующего элемента. Никакого сетевого запроса или хранения на сервере пример не создаёт.
Граница применения и частая ошибка
Value доступен в исходнике, поэтому не помещайте туда секреты. Не путайте data с произвольными data-атрибутами: последние прикрепляют дополнительные данные к разным элементам. Выберите механизм по реальному смыслу разметки.
Самостоятельная проверка
Измените видимую подпись, сохранив идентификатор, и проверьте значение в инспекторе. Затем составьте пример, где нужен time. Объясните, какие значения должны оставаться стабильными при переводе интерфейса.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.