Skip to main content
Ampliada respuesta.
Origen Enlace
dwarandae
  • 2.5k
  • 6
  • 22
  • 43

Antes de HTML5 si el desarrollador quería almacenar metadatos relacionados con la información de una etiqueta debía usar atributos como rel o class, posiblemente con un nombre particular para que, usando Javascript, se pudieran realizar acciones sobre estos elementos.

Desde HTML5 todos los atributos cuyo nombre comienza por data-* en los elementos se llaman atributos de datos y se usan para almacenar información con contenido semántico para el elemento. Por ejemplo:

<li data-id="123" data-correo="[email protected]" data-edad="24">Daniel</li>

crea un elemento de una lista. En el navegador sólamente se verá la palabra 'Daniel', pero gracias a los atributos id (por data-id), correo (por data-correo) y edad (por data-edad) es posible añadir información semántica al nombre que puede usarse para crear aplicaciones web, haciendo uso de Javascript o CSS con la API correspondiente.

De acuerdo a la especificación de HTML5, estos atributos personalizados pueden ser considerados como un área especial de almacenamiento de información privada (privada en el sentido que el usuario no ve esta información y habitualmente no afecta la presentación. Para el caso del elemento de la lista anterior, podría pensarse que todos los elementos de tipo li en una lista poseen cada uno tres atributos: un id, un correo y una edad. A partir de estos, y usando Javascript podría ser posible, por ejemplo, crear funcionalidades para ordenar los items de la lista por la edad (obteniendo todos los atributos de edad de los elementos de la lista), o filtrar los items que coincidan con un correo electrónico en particular.

Para el elemento div que servirá para encapsular la barra de progreso, el elemento data-percentage puede usarse para almacenar el valor correspondiente al porcentaje de la barra de progreso que se ha completado. La presentación de la misma (o la cantidad de color que indica qué tan 'llena' está la barra) es responsabilidad de los estilos que anexas, y, usando Javascript, podría alterar qué tan llena quiero que la barra se muestre en pantalla alterando el valor de este atributo data-percentage, de tal manera que se permita cierta interactividad con la barra, por ejemplo. En el caso que menciona, si elimina el atributo no ocurrirá nada porque no hay código que lea o altere este valor y la presentación de la hoja de estilos que anexa no hace uso de este atributo en particular para dibujar la porción de la barra de progreso que debe mostrar como completa.

Antes de HTML5 si el desarrollador quería almacenar metadatos relacionados con la información de una etiqueta debía usar atributos como rel o class, posiblemente con un nombre particular para que, usando Javascript, se pudieran realizar acciones sobre estos elementos.

Desde HTML5 todos los atributos cuyo nombre comienza por data-* en los elementos se llaman atributos de datos y se usan para almacenar información con contenido semántico para el elemento. Por ejemplo:

<li data-id="123" data-correo="[email protected]" data-edad="24">Daniel</li>

crea un elemento de una lista. En el navegador sólamente se verá la palabra 'Daniel', pero gracias a los atributos id (por data-id), correo (por data-correo) y edad (por data-edad) es posible añadir información semántica al nombre que puede usarse para crear aplicaciones web, haciendo uso de Javascript o CSS con la API correspondiente.

De acuerdo a la especificación de HTML5, estos atributos personalizados pueden ser considerados como un área especial de almacenamiento de información privada (privada en el sentido que el usuario no ve esta información y habitualmente no afecta la presentación. Para el caso del elemento de la lista anterior, podría pensarse que todos los elementos de tipo li en una lista poseen cada uno tres atributos: un id, un correo y una edad. A partir de estos, y usando Javascript podría ser posible, por ejemplo, crear funcionalidades para ordenar los items de la lista por la edad (obteniendo todos los atributos de edad de los elementos de la lista), o filtrar los items que coincidan con un correo electrónico en particular.

Antes de HTML5 si el desarrollador quería almacenar metadatos relacionados con la información de una etiqueta debía usar atributos como rel o class, posiblemente con un nombre particular para que, usando Javascript, se pudieran realizar acciones sobre estos elementos.

Desde HTML5 todos los atributos cuyo nombre comienza por data-* en los elementos se llaman atributos de datos y se usan para almacenar información con contenido semántico para el elemento. Por ejemplo:

<li data-id="123" data-correo="[email protected]" data-edad="24">Daniel</li>

crea un elemento de una lista. En el navegador sólamente se verá la palabra 'Daniel', pero gracias a los atributos id (por data-id), correo (por data-correo) y edad (por data-edad) es posible añadir información semántica al nombre que puede usarse para crear aplicaciones web, haciendo uso de Javascript o CSS con la API correspondiente.

De acuerdo a la especificación de HTML5, estos atributos personalizados pueden ser considerados como un área especial de almacenamiento de información privada (privada en el sentido que el usuario no ve esta información y habitualmente no afecta la presentación. Para el caso del elemento de la lista anterior, podría pensarse que todos los elementos de tipo li en una lista poseen cada uno tres atributos: un id, un correo y una edad. A partir de estos, y usando Javascript podría ser posible, por ejemplo, crear funcionalidades para ordenar los items de la lista por la edad (obteniendo todos los atributos de edad de los elementos de la lista), o filtrar los items que coincidan con un correo electrónico en particular.

Para el elemento div que servirá para encapsular la barra de progreso, el elemento data-percentage puede usarse para almacenar el valor correspondiente al porcentaje de la barra de progreso que se ha completado. La presentación de la misma (o la cantidad de color que indica qué tan 'llena' está la barra) es responsabilidad de los estilos que anexas, y, usando Javascript, podría alterar qué tan llena quiero que la barra se muestre en pantalla alterando el valor de este atributo data-percentage, de tal manera que se permita cierta interactividad con la barra, por ejemplo. En el caso que menciona, si elimina el atributo no ocurrirá nada porque no hay código que lea o altere este valor y la presentación de la hoja de estilos que anexa no hace uso de este atributo en particular para dibujar la porción de la barra de progreso que debe mostrar como completa.

Origen Enlace
dwarandae
  • 2.5k
  • 6
  • 22
  • 43

Antes de HTML5 si el desarrollador quería almacenar metadatos relacionados con la información de una etiqueta debía usar atributos como rel o class, posiblemente con un nombre particular para que, usando Javascript, se pudieran realizar acciones sobre estos elementos.

Desde HTML5 todos los atributos cuyo nombre comienza por data-* en los elementos se llaman atributos de datos y se usan para almacenar información con contenido semántico para el elemento. Por ejemplo:

<li data-id="123" data-correo="[email protected]" data-edad="24">Daniel</li>

crea un elemento de una lista. En el navegador sólamente se verá la palabra 'Daniel', pero gracias a los atributos id (por data-id), correo (por data-correo) y edad (por data-edad) es posible añadir información semántica al nombre que puede usarse para crear aplicaciones web, haciendo uso de Javascript o CSS con la API correspondiente.

De acuerdo a la especificación de HTML5, estos atributos personalizados pueden ser considerados como un área especial de almacenamiento de información privada (privada en el sentido que el usuario no ve esta información y habitualmente no afecta la presentación. Para el caso del elemento de la lista anterior, podría pensarse que todos los elementos de tipo li en una lista poseen cada uno tres atributos: un id, un correo y una edad. A partir de estos, y usando Javascript podría ser posible, por ejemplo, crear funcionalidades para ordenar los items de la lista por la edad (obteniendo todos los atributos de edad de los elementos de la lista), o filtrar los items que coincidan con un correo electrónico en particular.