Aprovecha los atributos que funcionan en todas partes y guarda tus propios datos en el HTML.
Abrir esta lección en KodokonAlgunos atributos funcionan en cualquier elemento: son los atributos globales. Ya usas id y class; añade a tu caja de herramientas hidden (oculta el elemento), lang (indica el idioma de un fragmento), title (tooltip al pasar el ratón) y tabindex (orden del foco con el teclado).
<p lang="en" title="Original quote">
Stay hungry, stay foolish.
</p>
<div hidden id="cookie-banner" class="banner">
We use cookies.
</div>¿Necesitas adjuntar tus propios datos a un elemento? Nunca inventes un atributo improvisado: HTML reserva los atributos data-* justo para eso. Tú eliges el nombre después del guion, en minúsculas y en kebab-case. Casos de uso típicos: un identificador de producto, un estado de la interfaz, la configuración de un componente.
<article
class="product-card"
data-product-id="42"
data-category="books"
data-in-stock="true"
>
<h2>HTML for pros</h2>
</article>Del lado de JavaScript, estos atributos se leen a través de la propiedad dataset. Cuidado con la conversión automática: el kebab-case del HTML se convierte en camelCase en JavaScript. Así, data-product-id se lee con dataset.productId. Los valores son siempre cadenas de texto, incluso "true" o "42".
const card = document.querySelector(".product-card");
console.log(card.dataset.productId); // "42"
console.log(card.dataset.inStock); // "true"
card.dataset.state = "selected";