Για ποιο λόγο χρησιμοποιούνται τα δεδομένα δεδομένων σε HTML;

Τα χαρακτηριστικά data-* χρησιμοποιούνται για την αποθήκευση προσαρμοσμένων δεδομένων που δεν έχουν οπτική αναπαράσταση, απευθείας σε στοιχεία HTML.

Κύριοι στόχοι χρήσης:

• Πρόσβαση σε δεδομένα μέσω JavaScript/CSS: Επιτρέπουν την εύκολη λήψη και χειρισμό των δεδομένων του στοιχείου μέσω JavaScript (element.dataset) ή τη χρήση τους σε επιλεκτές CSS ([data-attribute="value"]).
• Αποθήκευση μεταδεδομένων: Χρησιμοποιούνται για την αποθήκευση πρόσθετων πληροφοριών που σχετίζονται με το στοιχείο (π.χ., ID προϊόντος, τύπος χρήστη, κατάσταση).
• Δημιουργία προσαρμοσμένων συστατικών: Μπορούν να χρησιμοποιηθούν για τον ορισμό συμπεριφοράς ή ιδιοτήτων προσαρμοσμένων συστατικών, υλοποιημένων με JavaScript.
• Βελτίωση της σημασιολογίας: Μπορούν να προσθέσουν ένα επίπεδο σημασιολογίας, περιγράφοντας συγκεκριμένα δεδομένα που σχετίζονται με το περιεχόμενο.

Παράδειγμα χρήσης σε HTML:

<div data-product-id="123" data-category="electronics">
  Smartphone
</div>

Πρόσβαση μέσω JavaScript:

// Απόκτηση στοιχείου
const productElement = document.querySelector('div');

// Πρόσβαση στα data attributes
const productId = productElement.dataset.productId; // 123
const category = productElement.dataset.category;   // electronics

Χρήση σε CSS:

/* Στυλ για στοιχεία με data-category="electronics" */
[data-category="electronics"] {
  border: 1px solid blue;
}