Para que é recomendado usar atributos data em HTML?

Os atributos data-* em HTML são recomendados para armazenar dados personalizados que não têm uma representação visual, diretamente dentro dos elementos DOM. Isto permite:

• Armazenar pequenas porções de dados relacionadas com o elemento: Por exemplo, o identificador do produto, o estado do elemento, as configurações do widget.
• Facilitar o acesso e a manipulação de dados através do JavaScript: Os dados podem ser facilmente obtidos através de element.dataset e modificados.

// Obter dados
const meuElemento = document.getElementById('meu-elemento');
const idElemento = meuElemento.dataset.elementId; // Obter o valor do atributo data-element-id

// Definir dados
meuElemento.dataset.status = 'active'; // Definir o valor do atributo data-status

• Evitar classes não semânticas: O uso de classes para armazenar dados (por exemplo, .status-active) pode tornar o código menos legível e mais difícil de manter.
• Melhorar o desempenho em alguns cenários: Acesso aos dados via dataset pode ser mais rápido do que analisar atributos de string ou trabalhar com elementos ocultos.
• Usar esses dados em seletores CSS:

/* Selecionar elementos com um estado específico */
[data-status="active"] {
  border: 1px solid green;
}

É importante usar atributos data-* para dados que não tenham outro atributo semântico HTML adequado. Para dados que devem ser acessíveis por motores de busca ou outros analisadores, deve-se usar elementos e atributos semânticos apropriados.