Para que servem os atributos data no HTML?

Atributos de dados (data-*) permitem armazenar dados adicionais e não padrão sobre elementos HTML do lado do cliente sem usar explicitamente outros atributos ou manipular a estrutura do DOM para esses fins.

São úteis para:

• Armazenamento de dados para JavaScript: O JavaScript pode acessar facilmente esses dados e usá-los para comportamentos dinâmicos, interação com o elemento ou troca de informações entre partes da aplicação.

  <div id="user-profile" data-user-id="123" data-user-role="admin">
      Olá, admin!
  </div>
  

  // Obter dados dos atributos data-
  const userProfile = document.getElementById('user-profile');
  const userId = userProfile.dataset.userId; // "123"
  const userRole = userProfile.dataset.userRole; // "admin"
  

• Criação de atributos personalizados: Em vez de inventar atributos não padrão próprios (o que não está em conformidade com a especificação HTML), usa-se data-*, o que torna o código mais semântico e válido.

• Estilização: Com seletores CSS baseados em atributos, é possível estilizar elementos com base nos valores de seus atributos data-.

  <button data-status="active">Botão ativo</button>
  <button data-status="inactive">Botão inativo</button>
  

  /* Estilização baseada em atributo data- */
  button[data-status="active"] {
      background-color: green;
  }
  
  button[data-status="inactive"] {
      background-color: gray;
  }
  

• Frameworks e bibliotecas: Muitos frameworks e bibliotecas frontend usam atributos data- para inicializar componentes, passar parâmetros ou vincular dados (por exemplo, Vue.js com v-bind ou React com atributos data- para integração de bibliotecas de terceiros).

• Microformatos e dados estruturados: Em alguns casos, atributos data- podem ser usados para inserir microformatos ou marcar dados compreensíveis por máquinas.

No geral, os atributos data- fornecem uma maneira flexível e padrão de armazenar informações adicionais diretamente nos elementos HTML, facilitando a interação com eles via JavaScript e CSS.