Datos HTML-* Atributos


Ejemplo

Utilice el atributo data-* para incrustar datos personalizados:

<ul>
  <li data-animal-type="bird">Owl</li>
  <li data-animal-type="fish">Salmon</li>
  <li data-animal-type="spider">Tarantula</li>
</ul>

Definición y uso

Los data-*atributos se utilizan para almacenar datos personalizados privados para la página o la aplicación.

Los data-*atributos nos dan la capacidad de incrustar atributos de datos personalizados en todos los elementos HTML.

Los datos almacenados (personalizados) se pueden usar en el JavaScript de la página para crear una experiencia de usuario más atractiva (sin llamadas Ajax ni consultas a la base de datos del lado del servidor).

Los data-*atributos constan de dos partes:

  1. El nombre del atributo no debe contener letras mayúsculas y debe tener al menos un carácter después del prefijo "datos-".
  2. El valor del atributo puede ser cualquier cadena.

Nota: el agente de usuario ignorará por completo los atributos personalizados con el prefijo "data-".


Compatibilidad con navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el atributo.

Attribute
data-* 4.0 5.5 2.0 3.1 9.6

Sintaxis

<element data-*="somevalue">

Valores de atributo

Value Description
somevalue Specifies the value of the attribute (as a string)

páginas relacionadas

Tutorial HTML: Atributos HTML

Referencia HTML DOM: Método HTML DOM getAttribute()