Zašto se preporučuje korišćenje atributa data u HTML?

Атрибути data-* у HTML се препоручују за чување прилагођених података који немају визуелни приказ, директно унутар DOM елемената. Ово омогућава:

• Чување малих делова података повезаних са елементом: На пример, идентификатор производа, статус елемента, подешавања widget-а.
• Олакшавање приступа и манипулације подацима помоћу JavaScript-а: Податке је лако добити преко element.dataset и изменити их.

// Добијање података
const myElement = document.getElementById('my-element');
const elementId = myElement.dataset.elementId; // Добити вредност атрибута data-element-id

// Постављање података
myElement.dataset.status = 'active'; // Поставити вредност атрибута data-status

• Избегавање не-семантичких класа: Коришћење класа за чување података (нпр. .status-active) може учинити структуру мање читљивом и теже одрживом.
• Побољшање перформанси у одређеним сценаријима: Приступ подацима преко dataset може бити бржи од парсирања стринг атрибута или рада са скривеним елементима.
• Користите ове податке у CSS селекторима:

/* Изаберите елементе са одређеним статусом */
[data-status="active"] {
  border: 1px solid green;
}

Важно је користити data-* атрибуте за податке који немају други одговарајући семантички HTML атрибут. За податке који треба да буду приступачни за претраживаче или друге парсере, треба користити одговарајуће семантичке елементе и атрибуте.