HTML'de data özniteliklerinin kullanılması ne için önerilir?

HTML'deki data-* öznitelikleri, görsel temsili olmayan özel verileri doğrudan DOM öğeleri içinde saklamak için önerilir. Bu, şunları sağlar:

• Öğe ile ilişkili küçük veri parçalarını saklamak: Örneğin, ürün kimliği, öğe durumu, widget ayarları.
• JavaScript ile veri erişimini ve manipülasyonunu kolaylaştırmak: Veriler, element.dataset aracılığıyla kolayca alınabilir ve değiştirilebilir.

// Veri alma
const myElement = document.getElementById('my-element');
const elementId = myElement.dataset.elementId; // data-element-id özniteliğinin değerini al

// Veri ayarlama
myElement.dataset.status = 'active'; // data-status özniteliğinin değerini ayarla

• Anlamsız sınıflardan kaçınmak: Veriyi saklamak için sınıfların kullanılması (örneğin, .status-active) kodun okunabilirliğini azaltabilir ve bakımı zorlaştırabilir.
• Bazı senaryolarda performansı artırmak: dataset aracılığıyla verilere erişim, dizge özniteliklerini ayrıştırmaktan veya gizli öğelerle çalışmaktan daha hızlı olabilir.
• Bu verileri CSS seçicilerinde kullanmak:

/* Belirli bir duruma sahip öğeleri seçmek */
[data-status="active"] {
  border: 1px solid green;
}

data-* özniteliklerini, başka uygun semantik HTML özniteliği olmayan veriler için kullanmak önemlidir. Arama motorları veya diğer ayrıştırıcılar tarafından erişilebilir olması gereken veriler için, uygun semantik öğeler ve öznitelikler kullanılmalıdır.