0Pricing
HTML Academy · Aula

Sintaxe data-* e convenções de nomenclatura

Entenda nomes válidos de atributos data-* e sua finalidade.

Sintaxe data-* e convenções de nomenclatura é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 1 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.

Revisão: atributos data-*

Os atributos de dados (data-*) armazenam informações personalizadas em elementos HTML:

<div data-user-id="42" data-role="admin" data-active="true">
  User Card
</div>

Regras válidas de nomenclatura

Requisitos de nomenclatura dos atributos data-*:

  • Devem começar com data-
  • Devem ser seguidos por pelo menos um caractere
  • Podem conter apenas letras minúsculas, dígitos, hífens, sublinhados, pontos e dois-pontos
  • Não podem conter letras maiúsculas (o analisador de HTML converte os atributos para minúsculas)
  • Não podem conter espaços

Convenções de nomenclatura

Convenções de nomenclatura da comunidade:

<!-- BEM-style: module__element--modifier -->
data-card="profile"
data-card-id="42"
data-card-state="expanded"

<!-- Descriptive: domain-concept -->
data-product-id="SKU-123"
data-analytics-event="click-cta"
data-feature-flag="dark-mode"

Vários atributos de dados

Um elemento pode ter qualquer quantidade de atributos de dados:

<button
  type="button"
  data-action="delete"
  data-target-id="user-42"
  data-confirm="true"
  data-confirm-message="Delete this user permanently?"
>Delete</button>

Os valores são sempre cadeias de caracteres

Os valores dos atributos de dados são sempre cadeias de caracteres — analise-os em JavaScript:

const el = document.querySelector('[data-user-id]');

console.log(el.dataset.userId);              // '42' (string)
console.log(typeof el.dataset.userId);       // 'string'

// Parse to number:
const id = parseInt(el.dataset.userId, 10);   // 42 (number)

// Parse to boolean:
const active = el.dataset.active === 'true'; // true (boolean)

// Parse to JSON:
const config = JSON.parse(el.dataset.config); // object

Armazenamento de JSON em data-*

Armazene dados complexos como cadeias JSON:

<div
  data-config='{"theme":"dark","locale":"en-US","pageSize":20}'
  id="app"
></div>

<script>
const el = document.getElementById('app');
const config = JSON.parse(el.dataset.config);
console.log(config.theme);    // 'dark'
console.log(config.pageSize); // 20
</script>

data-* versus elementos personalizados

Quando escolher data-* em vez de elementos personalizados ou objetos JavaScript:

  • data-* — metadados específicos do elemento, visíveis no HTML e acessíveis pelo CSS
  • Elementos personalizados — componentes complexos e reutilizáveis com comportamento encapsulado
  • JavaScript Map/WeakMap — dados que não são necessários no HTML; dados grandes ou complexos

Uso de data-* em estruturas de desenvolvimento

Usos comuns de atributos de dados em estruturas de desenvolvimento:

<!-- Bootstrap: target collapsible elements -->
<button data-bs-toggle="collapse" data-bs-target="#menu">
  Toggle
</button>

<!-- Alpine.js: component data -->
<div x-data="{ open: false }">

<!-- Stimulus: controller identification -->
<div data-controller="menu" data-menu-open-value="false">

<!-- Testing libraries: stable selectors -->
<button data-testid="submit-btn">Submit</button>

Acessibilidade e data-*

Os atributos de dados não são anunciados por leitores de tela — não os use para informações de acessibilidade:

<!-- BAD: accessibility info in data-* -->
<button data-label="Close dialog">×</button>
<!-- Screen reader does NOT read data-label -->

<!-- GOOD: use aria-label for accessibility -->
<button aria-label="Close dialog">×</button>

Considerações de desempenho

Os atributos data-* têm impacto insignificante no desempenho:

  • A leitura de dataset é rápida (O(1))
  • É perfeitamente aceitável usar muitos atributos data-* em milhares de elementos
  • Armazenar grandes blocos de dados (imagens, JSON grande) em data-* é desperdício
  • Use WeakMap para armazenar objetos JS grandes associados a elementos DOM

Resumo: boas práticas para data-*

Boas práticas para data-*:

  • Use nomes em minúsculas, separados por hífens
  • Os valores são sempre cadeias de caracteres — converta-os conforme necessário
  • Para JSON: JSON.stringify / JSON.parse
  • Use-os para metadados de que o CSS ou o JavaScript precisa
  • Não substituem atributos ARIA
  • Não armazene segredos (visíveis no DevTools)

Verificação rápida

Para qual tipo dataset sempre retorna os valores dos atributos?

Recapitulação: sintaxe de data-*

Elementos essenciais da nomenclatura de data-*:

  • Formato: data-[lowercase-name]="value"
  • Acessado como: element.dataset.camelCaseName
  • Todos os valores são cadeias de caracteres — faça a conversão explicitamente
  • Armazene JSON para dados complexos
  • Use minúsculas, sem maiúsculas e sem espaços no nome do atributo

Perguntas Frequentes

A aula “Sintaxe data-* e convenções de nomenclatura” é grátis?

Sim — o texto completo de “Sintaxe data-* e convenções de nomenclatura” é 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 “Sintaxe data-* e convenções de nomenclatura”?

Entenda nomes válidos de atributos data-* e sua finalidade. 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 1 de 4.

Quanto tempo leva a aula “Sintaxe data-* e convenções de nomenclatura”?

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. Sintaxe data-* e convenções de nomenclatura
  2. Acessando data-* com dataset em JavaScript
  3. Usando data-* com seletores de atributos do CSS
  4. Padrões do mundo real: dicas de ferramentas e acompanhamento de estado
← Voltar para HTML Academy