La Etiqueta DATA

La etiqueta <data> vincula contenido legible para humanos con datos legibles por máquinas, facilitando el procesamiento automatizado de información sin perder la claridad visual. Es útil para integrar valores numéricos, códigos o identificadores en contenido visible.

Sintaxis básica

<data value="valor-máquina">Texto visible</data>

• Atributo obligatorio: value (representación estructurada del dato).

• Contenido interno: Texto legible para humanos.

<data value="valor-máquina">Texto visible</data>

Casos de uso comunes

Productos con SKU

<ul>
  <li>
    <data value="SKU-12345">Camiseta básica - $20</data>
  </li>
  <li>
    <data value="SKU-67890">Zapatos deportivos - $80</data>
  </li>
</ul>

Resultados deportivos

<p>
  Equipo A: <data value="3">3 puntos</data> | 
  Equipo B: <data value="1">1 punto</data>
</p>

Calificaciones académicas

<p>
  Nota final: <data value="4.5">A-</data>
</p>

Atributos clave

Atributo	Descripción
value	Valor estructurado para máquinas (números, códigos, IDs)
class	Clase CSS para estilización
id	Identificador único

Accesibilidad

Los lectores de pantalla no anuncian el valor de value, por lo que el texto interno debe ser claro.

Buenas prácticas:

• Usar texto descriptivo dentro de la etiqueta.
• Combinar con microdatos para SEO:

<data value="ISBN-9781234567890" itemprop="isbn">ISBN: 978-1234567890</data>

Estilización con CSS

Personaliza la apariencia sin afectar la semántica:

data {
  color: #2c3e50;
  font-weight: bold;
  background: #f8f9fa;
  padding: 2px 6px;
  border-radius: 4px;
}

data::after {
  content: " (" attr(value) ")";
  font-size: 0.8em;
  color: #666;
}

Errores comunes

Olvidar el atributo value

<!-- Incorrecto -->
<data>Producto A</data>

Usar para contenido no estructurado

<!-- Incorrecto -->
<data value="123">Texto descriptivo sin relación numérica</data>

Confundir con <time>

<!-- Incorrecto -->
<data value="2023-10-20">20 de octubre</data>

<!-- Correcto -->
<time datetime="2023-10-20">20 de octubre</time>

Ejemplos avanzados

Integración con JavaScript

<data id="temp" value="25">25°C</data>

<script>
  const tempElement = document.getElementById('temp');
  const temperatura = parseFloat(tempElement.value); // 25 (número)
</script>

Microdatos para SEO

<div itemscope itemtype="http://schema.org/Product">
  <h2 itemprop="name">Laptop Pro</h2>
  <data itemprop="price" value="999.99">$999.99</data>
</div>

Buenas prácticas

1. Priorizar valores útiles para scripts: IDs, precios, cantidades.

2. Mantener consistencia: Usar el mismo formato en value para datos similares.

3. Evitar duplicación: No repetir el valor de value en el texto visible si no es necesario.

Comparación con elementos similares

Elemento	Uso	Ejemplo
<data>	Valores estructurados legibles por máquina	<data value="42">42 unidades</data>
<time>	Fechas y horas	<time datetime="2023-10-20">20/10</time>
data-*	Datos personalizados sin semántica	<div data-precio="20">...</div>

Conclusión:

La etiqueta <data> es esencial para:

• Vincular contenido visible con datos procesables por máquinas.
• Mejorar la semántica y el SEO en aplicaciones web.
• Facilitar el manejo de información estructurada en scripts.

¡Úsala para crear experiencias más inteligentes y automatizadas!