Тег data в HTML: что это такое?

Синтаксис тега data

<data value="машиночитаемое_значение">человекочитаемый текст</data>

Атрибуты тега data

• value - обязательный атрибут, который содержит машиночитаемое значение элемента.

Также поддерживает глобальные атрибуты.

Примеры использования тега data

Простой пример

<data value="398">Красный свитер</data>

Использование в списке товаров

<ul>
  <li><data value="32">Футболка</data></li>
  <li><data value="398">Свитер</data></li>
  <li><data value="156">Джинсы</data></li>
</ul>

Использование с JavaScript

<data id="product" value="398">Красный свитер</data>
<script>
  const element = document.getElementById('product');
  console.log(element.value); // Выведет: 398
</script>

Советы по использованию тега data

• Всегда указывайте атрибут value - он является обязательным.
• Используйте тег data для связывания машиночитаемых данных с текстом, который видит пользователь.
• Не путайте тег data с пользовательскими атрибутами data-*.
• Используйте осмысленные значения в атрибуте value для облегчения обработки данных.
• Комбинируйте с JavaScript для динамической обработки данных.
• Если данные относятся к времени или дате, надо использовать тег <time>.

Часто задаваемые вопросы (FAQ)

1 Чем отличается тег data от атрибута data-*?

Тег data используется для связывания машиночитаемого значения с человекочитаемым текстом, в то время как атрибуты data-* используются для хранения пользовательских данных в HTML-элементах.

2 Можно ли использовать тег data без атрибута value?

Нет, атрибут value является обязательным для тега data, так как он определяет машиночитаемое значение.

Заключение

Тег data является полезным инструментом для связывания машиночитаемых данных с человекочитаемым текстом. Его правильное использование может улучшить взаимодействие между пользовательским интерфейсом и программной логикой вашего сайта.

Для получения дополнительной информации о теге data, рекомендуем ознакомиться с официальной документацией на MDN.