0

Cómo usar atributos de datos en HTML5

Desarrollo web

Hoy en día, HTML5 nos brinda la oportunidad de adjuntar datos de atributos personalizados para todos los elementos HTML. Puedes añadir elementos como metadatos sobre dimensiones, latitudes, longitudes, etc. Está disponible en casi todos los navegadores web y le da a los desarrolladores la flexibilidad para incorporar todo tipo de información. En este post, te enseñamos a utilizar atributos de datos en HTML5. ¿Preparado?

 

La estructura de datos personalizados Atributos

Consta de dos partes:

  1. Attribute Name. El atributo de datos de nombre tiene que tener un carácter largo y llevar el prefijo con ‘data-‘ No debería contener ninguna letra mayúscula.

  2. Attribute Value. El atributo de valor puede ser cualquiera.

Ejemplo

Usando la sintaxis anterior, puedes adjuntar los atributos de datos personalizados con los valores como te mostramos a continuación:

Código 1

Ahora vamos a ver cómo acceder a estos datos mediante javascript y jQuery para crear una buena experiencia de usuario.

Si haces clic en Detalles del sitio, obtendrás los siguientes valores al acceder a dichos atributos

  • sitename – redcoruna

  • link – http://redcoruna.com

  • localization – Lugo

  • tags – PHP, HTML5, CSS3, jQuery

Acceder a los datos con atributos JavaScript

Si quieres recuperar o actualizar estos atributos usando los existentes en JavaScript nativo, tienes que usar los métodos getAttribute y setAttribute como te indicamos a continuación:

Código 2

 

Acceder a los datos con atributos jQueryCódigo 3

 

Es un enfoque creativo para muchos problemas y es una solución perfecta para utilizar estos atributos.

Los atributos de datos personalizados no se colgarán en el navegador y su código será válido ya que se está utilizando un documento tipo HMTL5 debido a que los atributos que empiezan con ‘data-‘ serán ignorados.

También hemos visto lo fácil que es utilizar javascript y jQuery para leer los valores que adjunte atributos en cualquier elemento en su página.

Ya habéis visto lo fácil que es hacer uso de JavaScript y jQuery para leer los valores de atributos en cualquier elemento de tu página web y así poder usar atributos de datos en HTML5. Como siempre, ¡todos vuestros comentarios serán bien recibidos tanto en Twitter como en Facebook!

Host Europe

Host Europe

Host Europe es más que un proveedor de hosting y dominios. Nos ganamos tu confianza día a día gracias a años de experiencia y el mejor servicio.

More Posts

Deja un comentario

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