Propiedad data-* del DOM HTML

Definición y uso

data-* La propiedad se utiliza para almacenar datos personalizados privados de la página o aplicación.

data-* La propiedad nos permite insertar propiedades data personalizadas en todos los elementos HTML.

Los datos almacenados (personalizados) pueden ser utilizados por JavaScript en la página para crear una mejor experiencia de usuario (sin llamadas Ajax o consultas en bases de datos del servidor).

data-* La propiedad consta de dos partes:

  • El nombre de la propiedad no debe contener ninguna letra mayúscula y debe haber al menos un carácter después del prefijo "data-"
  • El valor de la propiedad puede ser cualquier cadena

Advertencia: el agente de usuario ignorará completamente las propiedades personalizadas con prefijo "data-".

Vea también:

Tutoriales HTML:Atributos HTML

Manual de referencia del DOM HTML:Método getAttribute() del DOM HTML

Ejemplo

Inserte datos personalizados utilizando atributos data-*:

<ul>
  <li data-animal-type="aves">Urraca</li>
  <li data-animal-type="peces">Atún</li>
  <li data-animal-type="araña">Pulgón</li>
</ul>

Prueba por tu cuenta

Sintaxis

<element data-*="somevalue">

Valor del atributo

Valor Descripción
somevalue Se especifica el valor del atributo (como cadena).

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que primero soportó esta propiedad.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 5.5 2.0 3.1 9.6