Atributos personalizados HTML5 - ¿Por qué los usaría?

Question

Parece que no puedo entender por qué me gustaría que HTML5 permita atributos personalizados. ¿Por qué los usaría?

Answer 1

Supongo que se está refiriendo a los atributos HTML5 [data-*].

La ventaja es que puede asociar fácilmente algunos datos de scripting (aún semánticos, pero no para visualizar) con sus elementos sin tener que insertar inline javascript por todas partes, y será válido HTML5. Hacer lo mismo en HTML4 requeriría especificar un espacio de nombre personalizado y agregar algunos atributos de espacio de nombres.

Digamos que tienes una lista de artículos para la venta, es posible que desee almacenar el precio numérico sin tratar de analizar una cadena:

<ul> 
    <li data-price="5">Item 1 is only $5 this week!</li> 
    <li data-price="1">Sale on Item 2, only $1</li> 
    ... 
</ul> 

Si usted permite que su usuario marcar un número de diferentes elementos para comprar, puede sacar fácilmente el valor numérico para mostrar un total acumulado.

Alternativamente, podría haber puesto los números en un tramo con una clase específica, encontrar el tramo correcto en el elemento correcto y extraer el valor de esa manera, pero los atributos [data-*] reducen la cantidad de marcado/secuencia de comandos necesarios para hacer la misma cosa.

Si no desea utilizarlo, no es necesario. Hay muchas maneras de asociar datos con elementos, esto es solo uno nuevo.

Además, la nueva API de JavaScript dataset proporciona un medio coherente para acceder de forma declarativa a los valores almacenados en los atributos [data-*].

Para los usuarios de jQuery, .data() y .attr() se puede utilizar para acceder [data-*] atributos, y I have written up a detailed answer on when you would want to use one over the other.

Answer 2

atributos personalizados ya se utilizan ampliamente, por ejemplo, aquí está an example from dojoToolkit():

<div style="width: 350px; height: 300px"> 
    <div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;"> 
     <div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true"> 
      Lorem ipsum and all around... 
     </div> 
     <div dojoType="dijit.layout.ContentPane" title="My second tab"> 
      Lorem ipsum and all around - second... 
     </div> 
     <div dojoType="dijit.layout.ContentPane" title="My last tab" closable="true"> 
      Lorem ipsum and all around - last... 
     </div> 
    </div> 
</div> 

Esto podría ahora ser reescrita por lo que el margen de beneficio valida el uso de atributos como data-dojoType. También le permiten almacenar datos específicos de la aplicación en sus etiquetas en lugar de piratear el atributo de clase.

Hay a good introduction to data-* attributes on HTML5 Doctor.

Answer 3

He encontrado otro uso para el atributo Data-:

Se podría utilizar el nuevo encargo data- atributo de HTML 5 para la información sobre herramientas: Semantic Tooltips With Pure CSS3 and HTML5.

Answer 4

Usando el atributo data- personalizado está revisando el futuro de su página html5, ningún navegador futuro que adhiera a la especificación usará data-[attribute], por lo tanto, no entrará en conflicto con su atributo personalizado.