0Pricing
HTML Academy · Lección

Sintaxis data-* y convenciones de nomenclatura

Comprenda los nombres válidos de atributos data-* y su finalidad

Sintaxis data-* y convenciones de nomenclatura es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

Repaso: atributos data-*

Los atributos de datos (data-*) almacenan información personalizada en elementos HTML:

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

Reglas de nomenclatura válidas

Requisitos de nomenclatura de los atributos data-*:

  • Deben comenzar por data-
  • Después debe aparecer al menos un carácter
  • Solo pueden contener letras minúsculas, dígitos, guiones, guiones bajos, puntos y dos puntos
  • No pueden contener letras mayúsculas (el analizador de HTML convierte los atributos a minúsculas)
  • No pueden contener espacios

Convenciones de nomenclatura

Convenciones de nomenclatura de la comunidad:

<!-- 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"

Múltiples atributos de datos

Un elemento puede tener cualquier cantidad de atributos de datos:

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

Los valores siempre son cadenas

Los valores de los atributos de datos siempre son cadenas; conviértalos en 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

Almacenamiento de JSON en data-*

Almacene los datos complejos como cadenas 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-* frente a elementos personalizados

Cuándo elegir data-* frente a elementos personalizados u objetos de JavaScript:

  • data-* — metadatos específicos del elemento, visibles en HTML y accesibles desde CSS
  • Elementos personalizados — componentes complejos y reutilizables con comportamiento encapsulado
  • JavaScript Map/WeakMap — datos que no se necesitan en HTML; datos grandes o complejos

Uso de data-* en frameworks

Usos habituales de los atributos de datos en los frameworks:

<!-- 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>

Accesibilidad y data-*

Los atributos de datos no son anunciados por los lectores de pantalla; no los use para información de accesibilidad:

<!-- 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>

Consideraciones de rendimiento

Los atributos data-* tienen un impacto insignificante en el rendimiento:

  • Leer dataset es rápido (O(1))
  • El uso intensivo de data-* en miles de elementos no supone un problema
  • Almacenar bloques grandes de datos (imágenes o JSON de gran tamaño) en data-* es ineficiente
  • Use WeakMap para almacenar objetos JavaScript grandes asociados a elementos del DOM

Resumen: buenas prácticas para data-*

Buenas prácticas para data-*:

  • Use nombres en minúsculas separados por guiones
  • Los valores siempre son cadenas; conviértalos según sea necesario
  • Para JSON: JSON.stringify / JSON.parse
  • Úselo para metadatos que CSS o JavaScript necesiten
  • No sustituye a los atributos ARIA
  • No almacene secretos (son visibles en DevTools)

Comprobación rápida

¿Como qué tipo devuelve siempre dataset los valores de los atributos?

Repaso: sintaxis de data-*

Aspectos esenciales de la nomenclatura de data-*:

  • Formato: data-[lowercase-name]="value"
  • Acceso: element.dataset.camelCaseName
  • Todos los valores son cadenas; conviértalos explícitamente
  • Almacene JSON para datos complejos
  • Use minúsculas, sin mayúsculas ni espacios en el nombre del atributo

Preguntas frecuentes

¿La lección «Sintaxis data-* y convenciones de nomenclatura» es gratis?

Sí — el texto completo de «Sintaxis data-* y convenciones de nomenclatura» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Sintaxis data-* y convenciones de nomenclatura»?

Comprenda los nombres válidos de atributos data-* y su finalidad Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML Academy?

No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Sintaxis data-* y convenciones de nomenclatura»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML Academy?

Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Sintaxis data-* y convenciones de nomenclatura
  2. Acceder a data-* con dataset en JavaScript
  3. Usar data-* con selectores de atributos CSS
  4. Patrones reales: tooltips y seguimiento de estados
← Volver a HTML Academy