Para que são usados os atributos data em HTML?

Os atributos data-* são usados para armazenar dados personalizados que não têm uma representação visual, diretamente nos elementos HTML.

Objetivos principais de uso:

• Acesso a dados via JavaScript/CSS: Permitem obter e manipular facilmente os dados do elemento através de JavaScript (element.dataset) ou usá-los em seletores CSS ([data-attribute="value"]).
• Armazenamento de metainformação: Conveniente para guardar informações adicionais relacionadas com o elemento (por exemplo, ID do produto, tipo de utilizador, estado).
• Criação de componentes personalizados: Podem ser usados para definir comportamentos ou propriedades de componentes personalizados, implementados com JavaScript.
• Melhoria da semântica: Podem acrescentar um certo nível de semântica, descrevendo dados específicos relacionados com o conteúdo.

Exemplo de uso em HTML:

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

Acesso via JavaScript:

// Obter o elemento
const productElement = document.querySelector('div');

// Acesso aos atributos data
const productId = productElement.dataset.productId; // 123
const category = productElement.dataset.category;   // electronics

Uso em CSS:

/* Estilo para elementos com data-category="electronics" */
[data-category="electronics"] {
  border: 1px solid blue;
}