HTMLda data atributlaridan foydalanish tavsiya etiladi?

HTML'dagi data-* atributlari, vizual taqdimotga ega bo'lmagan maxsus ma'lumotlarni DOM elementlari ichida saqlash uchun tavsiya etiladi. Bu quyidagilarni imkonini beradi:

• Element bilan bog'liq kichik ma'lumotlarni saqlash: Masalan, mahsulot identifikatori, element holati, vidjet sozlamalari.
• JavaScript yordamida ma'lumotlarga kirishni va ularni o'zgartirishni soddalashtirish: Ma'lumotlar element.dataset orqali oson olinadi va o'zgartiriladi.

// Ma'lumotlarni olish
const myElement = document.getElementById('my-element');
const elementId = myElement.dataset.elementId; // data-element-id atributining qiymatini olamiz

// Ma'lumotlarni o'rnatish
myElement.dataset.status = 'active'; // data-status atributining qiymatini o'rnatamiz

• Semantik bo'lmagan sinflardan qochish: Ma'lumotlarni saqlash uchun sinflardan foydalanish (masalan, .status-active) kodni kamroq o'qilishi va qo'llab-quvvatlashni qiyinlashtirishi mumkin.
• Ba'zi holatlarda ishlash tezligini oshirish: dataset orqali ma'lumotlarga kirish, satr atributlarini tahlil qilish yoki yashirin elementlar bilan ishlashdan tezroq bo'lishi mumkin.
• Ushbu ma'lumotlarni CSS selektorlarida ishlatish:

/* Muayyan holatga ega elementlarni tanlash */
[data-status="active"] {
  border: 1px solid green;
}

data-* atributlarini, boshqa semantik HTML atributi bo'lmagan ma'lumotlar uchun ishlatish muhimdir. Qidiruv tizimlari yoki boshqa parserlar uchun kirish mumkin bo'lgan ma'lumotlar uchun, mos semantik elementlar va atributlardan foydalanish tavsiya etiladi.