Για ποιο λόγο συνιστάται η χρήση των χαρακτηριστικών data στο HTML;

Οι ιδιότητες data-* στο HTML συνιστώνται για την αποθήκευση προσαρμοσμένων δεδομένων που δεν έχουν οπτική αναπαράσταση, απευθείας μέσα στα στοιχεία DOM. Αυτό επιτρέπει:

• Αποθήκευση μικρών τμημάτων δεδομένων που σχετίζονται με το στοιχείο: Για παράδειγμα, το αναγνωριστικό προϊόντος, η κατάσταση του στοιχείου, οι ρυθμίσεις widget.
• Εύκολη πρόσβαση και τροποποίηση δεδομένων μέσω JavaScript: Τα δεδομένα μπορούν να ληφθούν εύκολα μέσω του element.dataset και να τροποποιηθούν.

// Λήψη δεδομένων
const myElement = document.getElementById('my-element');
const elementId = myElement.dataset.elementId; // Λήψη της τιμής του data-element-id

// Ορισμός δεδομένων
myElement.dataset.status = 'active'; // Ορισμός της τιμής του data-status

• Αποφυγή μη-σημαντικών κλάσεων: Η χρήση κλάσεων για την αποθήκευση δεδομένων (π.χ., .status-active) μπορεί να κάνει τη δομή λιγότερο αναγνώσιμη και πιο δύσκολη στη συντήρηση.
• Βελτίωση της απόδοσης σε ορισμένα σενάρια: Η πρόσβαση στα δεδομένα μέσω dataset μπορεί να είναι ταχύτερη από το parsing αλφαριθμητικών ιδιοτήτων ή την εργασία με κρυμμένα στοιχεία.
• Χρήση αυτών των δεδομένων σε CSS selectors:

/* Επιλογή στοιχείων με συγκεκριμένη κατάσταση */
[data-status="active"] {
  border: 1px solid green;
}

Είναι σημαντικό να χρησιμοποιείτε τα attributes data-* για δεδομένα που δεν έχουν άλλο κατάλληλο σημασιολογικό HTML attribute. Για δεδομένα που πρέπει να είναι προσβάσιμα από μηχανές αναζήτησης ή άλλους parsers, θα πρέπει να χρησιμοποιούνται αντίστοιχα σημασιολογικά στοιχεία και attributes.