Custom Data en HTML5

Custom Data es una característica que encontramos en HTML5 para incorporar información personalizada en atributos de elementos del estándar.

La manera de utilizar esta opción es emplearla como un atributo del elemento o los elementos que deseemos. La lógica sería la siguiente: data-*="algo".

Siempre debemos comenzar con data- y luego del guión, en lugar del  * pondremos la palabra personalizada que deseemos. Entre las comillas, en lugar de "algo", debemos indicar una cadena como valor. Vamos a ver un ejemplo a continuación:

<span data-name="Roger Federer">Tenista record de Torneos de Nivel Mundial</span>

Luego, mediante JavaScript y el acceso al DOM podremos recuperar el valor que especifiquemos para aplicar funciones o manipular comportamiento y/o apariencia del elemento.

Un excelente artículo sobre este tema lo encontraremos en HTML5 Doctor.

Encontraremos más información en el Draf del Editor en el W3C.

 

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.