Para que é recomendado usar atributos data em HTML?

Os atributos data-* são usados para armazenar dados arbitrários relacionados a um elemento HTML específico, sem a necessidade de usar atributos não padrão ou propriedades DOM.

Vantagens principais:

• Corretos semanticamente: Fazem parte do padrão HTML5 e não violam a validade do documento.
• Acesso fácil: O acesso aos dados é feito através da propriedade dataset em JavaScript, que retorna um objeto com chaves correspondentes às partes do atributo após data-.
• Conveniência para JavaScript/CSS: Permitem vincular determinados dados aos elementos, que podem então ser usados na lógica JavaScript ou para estilização em CSS (usando seletores de atributos).
• Separação de dados e apresentação: Ajudam a separar a estrutura HTML dos dados, que podem ser usados para comportamento ou apresentação.

Exemplos de uso:

• Armazenamento do ID de uma entrada no banco de dados.
• Salvando parâmetros para uma janela pop-up ou diálogo modal.
• Definindo o estado de um elemento (por exemplo, data-state="active").
• Transmitindo pequenos volumes de dados do backend para o frontend para uso em JavaScript.

Exemplo de acesso em JavaScript:

// HTML: <div id="myElement" data-id="123" data-category="electronics"></div>
const element = document.getElementById('myElement');
const id = element.dataset.id; // Acesso ao valor "123"
const category = element.dataset.category; // Acesso ao valor "electronics"