Атрибутҳои data дар HTML барои чӣ истифода мешаванд?

Атрибутҳо data-* барои нигоҳ доштани маълумоти фармоишӣ истифода мешаванд, ки намоиши визуалӣ надоранд, мустақиман дар унсурҳои HTML.

Ҳадафҳои асосии истифода:

• Дастрасӣ ба маълумот тавассути JavaScript/CSS: Имкон медиҳанд, ки ба осонӣ маълумотҳои унсурро бо JavaScript (element.dataset) гирифта ва ё онҳоро дар селекторҳои CSS ([data-attribute="value"]) истифода бурдан мумкин аст.
• Захира кардани мета-мавзӯъҳо: Барои нигоҳ доштани маълумоти иловагӣ, ки бо унсур алоқаманд аст (масалан, ID-и маҳсулот, навъи корбар, ҳолат).
• Эҷоди компонентҳои фармоишӣ: Мумкин аст барои муайян кардани рафтор ё хосиятҳои компонентҳои фармоишӣ, ки бо JavaScript амалӣ шудаанд.
• Беҳтар кардани семантика: Мумкин аст сатҳи муайяни семантика илова кунад, ки маълумоти мушаххасро, ки бо мундариҷа алоқаманд аст, тавсиф мекунад.

Масалан дар HTML:

<div data-product-id="123" data-category="electronics">
  Смартфон
</div>

Дастрасӣ тавассути JavaScript:

// Гирифтани унсур
const productElement = document.querySelector('div');

// Дастрасӣ ба атрибутҳои data
const productId = productElement.dataset.productId; // 123
const category = productElement.dataset.category;   // electronics

Истифода дар CSS:

/* Стил барои унсурҳое бо data-category="electronics" */
[data-category="electronics"] {
  border: 1px solid blue;
}