0Pricing
HTML Academy · Aula

Atributos de dados personalizados data-*

Armazenar dados personalizados diretamente nos elementos com atributos data-*.

Atributos de dados personalizados data-* é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

O que são atributos data-*?

Atributos de dados personalizados permitem armazenar informações adicionais diretamente nos elementos HTML:

<button data-user-id="42" data-action="delete">Delete User</button>
<li data-category="frontend" data-level="beginner">HTML</li>

<!-- Format: data-[name]="value" -->
<!-- Any alphanumeric name after data- is valid -->
<!-- Values are always strings -->

Por que data-* existe

Antes de data-*, os desenvolvedores armazenavam dados adicionais em:

  • Campos de entrada ocultos (confusos)
  • Nomes de classes CSS (frágeis)
  • Atributos não padronizados, como rel ou title (HTML inválido)

O HTML5 formalizou data-* como a maneira oficial de incorporar dados personalizados sem afetar a semântica ou a apresentação.

Regras de nomenclatura

Regras de nomenclatura dos atributos data-*:

  • Devem começar com data-
  • O nome pode conter letras minúsculas, dígitos, hífens, sublinhados e pontos
  • O nome não pode conter letras maiúsculas (a especificação HTML as converte para minúsculas)
  • O nome não pode começar com xml
<div data-user-id="1">OK</div>
<div data-product-category="tools">OK</div>
<!-- <div data-XML-thing="1">BAD: starts with xml -->
<!-- <div data-MyProp="1">BAD: uppercase in name -->

Leitura de data-* em JavaScript

Acesse dados personalizados por meio da propriedade dataset:

<button id="btn"
  data-user-id="42"
  data-action="delete"
  data-confirm-message="Are you sure?"
>
  Delete
</button>

<script>
const btn = document.getElementById('btn');
console.log(btn.dataset.userId);          // '42'
console.log(btn.dataset.action);          // 'delete'
console.log(btn.dataset.confirmMessage);  // 'Are you sure?'
// Note: data-user-id → dataset.userId (camelCase conversion)
</script>

Gravação de data-* com dataset

Defina e remova atributos de dados por meio de dataset:

const card = document.querySelector('.card');

// Set:
card.dataset.status = 'active';
// Now: <div class="card" data-status="active">

// Delete:
delete card.dataset.status;
// Now: data-status is removed

// Alternatively with setAttribute:
card.setAttribute('data-status', 'inactive');
card.removeAttribute('data-status');

Conversão de hífen para camelCase

A API dataset converte nomes separados por hífens para camelCase:

<!-- HTML attribute         JavaScript dataset property -->
data-user-id           →   dataset.userId
data-product-category  →   dataset.productCategory
data-max-retries       →   dataset.maxRetries
data-is-active         →   dataset.isActive

Seletores de atributos CSS

Use atributos de dados nos seletores CSS:

[data-status="active"] {
  color: green;
}

[data-status="inactive"] {
  color: gray;
  text-decoration: line-through;
}

/* Present but any value: */
[data-featured] {
  border: 2px solid gold;
}

Padrão de dica de ferramenta

Crie dicas de ferramenta exclusivamente com CSS usando atributos de dados:

<span data-tooltip="This is a tooltip">Hover me</span>

/* CSS: */
/*
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);  /* attr() reads the attribute value */
  position: absolute;
  background: #333;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
[data-tooltip]:hover::after { opacity: 1; }
*/

Padrão de rastreamento de estado

Acompanhe o estado de componentes com atributos de dados:

<button data-state="off" id="toggle">Toggle</button>

<script>
document.getElementById('toggle').addEventListener('click', function() {
  const state = this.dataset.state;
  this.dataset.state = state === 'off' ? 'on' : 'off';
  this.textContent = this.dataset.state === 'on' ? 'Active' : 'Toggle';
});
</script>

/* CSS: */
/* [data-state="on"] { background: green; color: white; } */

data-* vs variáveis JavaScript

Quando usar data-* em vez de armazenar dados em JavaScript:

  • Use data-* para valores que correspondem diretamente a um elemento DOM e podem ser lidos pelo CSS
  • Use variáveis ou objetos JavaScript para estruturas de dados complexas que não estejam vinculadas a elementos específicos
  • Não armazene dados grandes ou confidenciais em data-* — eles ficam visíveis no DevTools

data-* não serve para apresentação

Erros comuns a evitar:

<!-- BAD: storing presentation data in data-* -->
<div data-color="red" data-font-size="18">Text</div>
<!-- Use CSS classes instead: -->
<div class="text-danger text-lg">Text</div>

<!-- BAD: storing sensitive data -->
<div data-api-key="sk-123...">Content</div>
<!-- NEVER store secrets in HTML attributes -->

Verificação rápida

Como a API dataset acessa um atributo data-product-id?

Recapitulação: atributos data-*

Princípios essenciais dos atributos de dados personalizados:

  • data-name="value" — armazena metadados personalizados nos elementos
  • Acessados por meio de element.dataset.camelCase
  • Hífens são convertidos para camelCase na API dataset
  • Use-os no CSS com seletores [data-name="value"]
  • Nunca armazene dados confidenciais (chaves, senhas) em atributos de dados

Perguntas Frequentes

A aula “Atributos de dados personalizados data-*” é grátis?

Sim — o texto completo de “Atributos de dados personalizados data-*” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “Atributos de dados personalizados data-*”?

Armazenar dados personalizados diretamente nos elementos com atributos data-*. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Atributos de dados personalizados data-*”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. id, class, style e title
  2. O atributo hidden
  3. tabindex e accesskey
  4. Atributos de dados personalizados data-*
← Voltar para HTML Academy