HTML'de data öznitelikleri ne için kullanılır?

data-* öznitelikleri, görsel temsili olmayan özel verileri HTML öğelerinde depolamak için kullanılır.

Kullanım amaçları:

• JavaScript/CSS ile verilere erişim: Öğenin verilerini JavaScript (element.dataset) aracılığıyla kolayca almak ve manipüle etmek veya CSS seçicilerinde ([data-attribute="value"]) kullanmak.
• Meta bilgi depolama: Öğeyle ilişkili ek bilgileri saklamak için uygundur (örneğin, ürün kimliği, kullanıcı tipi, durum).
• Özel bileşenler oluşturma: JavaScript ile uygulanan özel bileşenlerin davranışlarını veya özelliklerini tanımlamak için kullanılabilir.
• Semantiğin geliştirilmesi: İçeriğe özgü belirli verileri tanımlayarak semantiği artırabilir.

HTML'de kullanım örneği:

<div data-product-id="123" data-category="electronics">
  Akıllı Telefon
</div>

JavaScript ile erişim:

// Öğeyi alma
const productElement = document.querySelector('div');

// data özniteliklerine erişim
const productId = productElement.dataset.productId; // 123
const category = productElement.dataset.category;   // electronics

CSS'te kullanımı:

/* data-category="electronics" olan öğeler için stil */
[data-category="electronics"] {
  border: 1px solid blue;
}