HTML-ում data ատրիբուտները ինչու են օգտագործվում?

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-ում օգտագործում՝

/* Style for elements with data-category="electronics" */
[data-category="electronics"] {
  border: 1px solid blue;
}