Etiqueta data HTML5: Representar datos en la web

Vamos a repasar la etiqueta data HTML5. Dicha etiqueta está en el standar HTML de WHATWG, mientras que está como recomendación HTML5 de la W3C, por lo que puede que pase tiempo hasta que se valide.

Esta etiqueta tiene una finalidad similar a la etiqueta time y su atributo datetime, en vez de representar una fecha u hora representa un dato válido reconocible por el usuario y un servidor web.

Otro elemento interesante es la etiqueta template.

Sintaxis de la etiqueta data HTML5

Veamos la sintaxis extraída de la página de la W3C:

<data value="valor">texto</data>

Os explico el código superior:

• La etiqueta data engloba un texto que puede estar en un párrafo, lista o similar.
• Con el atributo value asignamos el valor real que se explica en el texto.

Si el valor o dato que queremos representar es una fecha u hora debemos usar la etiqueta time.

Ejemplo de la etiqueta data HTML5

Os voy a poner un código de ejemplo de esta nueva etiqueta:

<p>Distancia recorrida</p>
<ul>
 <li><data value="10">Diez Km</data></li>
 <li><data value="20">Veinte Km</data></li>
 <li><data value="30">Treinta Km</data></li>
</ul>

Tal y como se aprecia en el ejemplo mediante el texto se representa el valor reconocible por el usuario y con el atrbituo value un valor reconocible por un servidor.