Atributos de datos personalizados data-*
Almacene datos personalizados directamente en los elementos mediante atributos data-*.
Atributos de datos personalizados data-* es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 4 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.
¿Qué son los atributos data-*?
Los atributos de datos personalizados permiten almacenar información adicional directamente en los 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 qué existe data-*
Antes de data-*, los desarrolladores almacenaban datos adicionales en:
- Campos ocultos (poco prácticos)
- Nombres de clases CSS (frágiles)
- Atributos no estándar como
relotitle(HTML no válido)
HTML5 formalizó data-* como la forma oficial de insertar datos personalizados sin afectar a la semántica ni a la presentación.
Reglas de nomenclatura
Reglas para nombrar atributos data-*:
- Deben comenzar por
data- - El nombre puede contener letras minúsculas, dígitos, guiones, guiones bajos y puntos
- El nombre no debe contener letras mayúsculas (la especificación HTML las convierte a minúsculas)
- El nombre no puede comenzar por
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 -->Leer data-* en JavaScript
Acceda a los datos personalizados mediante la propiedad 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>Escribir data-* con dataset
Establezca y elimine atributos de datos mediante 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');Conversión de guiones a camelCase
La API dataset convierte los nombres separados por guiones a 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.isActiveSelectores de atributos CSS
Utilice atributos de datos en los selectores 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;
}Patrón de tooltip
Implemente tooltips con CSS puro mediante atributos de datos:
<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; }
*/Patrón de seguimiento del estado
Realice un seguimiento del estado de los componentes mediante atributos de datos:
<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-* frente a variables de JavaScript
Cuándo utilizar data-* en lugar de almacenar datos en JavaScript:
- Utilice data-* para valores que correspondan directamente a un elemento del DOM y que CSS pueda leer
- Utilice variables u objetos de JavaScript para estructuras de datos complejas que no estén vinculadas a elementos específicos
- No almacene datos grandes ni confidenciales en data-*; son visibles en DevTools
data-* no es para la presentación
Errores habituales que debe 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 -->Comprobación rápida
¿Cómo accede la API dataset a un atributo data-product-id?
Resumen: atributos data-*
Aspectos esenciales de los atributos de datos personalizados:
data-name="value": almacena metadatos personalizados en los elementos- Se accede a ellos mediante
element.dataset.camelCase - Los guiones se convierten a camelCase en la API dataset
- Utilícelos en CSS con selectores
[data-name="value"] - No almacene nunca datos confidenciales (claves, contraseñas) en atributos de datos
Preguntas frecuentes
¿La lección «Atributos de datos personalizados data-*» es gratis?
Sí — el texto completo de «Atributos de datos personalizados data-*» 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 «Atributos de datos personalizados data-*»?
Almacene datos personalizados directamente en los elementos mediante atributos data-*. 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 4 de 4.
¿Cuánto tiempo toma la lección «Atributos de datos personalizados data-*»?
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
- id, class, style y title
- El atributo hidden
- tabindex y accesskey
- Atributos de datos personalizados data-*