El atributo “currency” no está permitido en el elemento “span” en este punto.

La especificación HTML define un conjunto específico de atributos permitidos para cada elemento. El elemento <span> soporta atributos globales (como id, class, style, title, etc.) pero no reconoce currency como un atributo válido. Cuando añades un atributo no estándar como currency a un elemento, el validador de W3C lo marca porque no se ajusta al estándar HTML.

Este patrón aparece frecuentemente en sitios de e-commerce, aplicaciones financieras, o contextos de internacionalización donde los desarrolladores quieren asociar un código de moneda (como USD, EUR, o GBP) con un precio mostrado en un <span>. Aunque los navegadores normalmente ignorarán atributos no reconocidos sin romper la página, usarlos crea varios problemas:

• Conformidad con estándares: HTML inválido puede llevar a comportamientos impredecibles entre diferentes navegadores y futuras versiones de navegadores.
• Mantenibilidad: Otros desarrolladores (o herramientas) no reconocerán atributos no estándar, haciendo que el código sea más difícil de entender y mantener.
• Accesibilidad: Las tecnologías de asistencia dependen de HTML válido y bien estructurado. Los atributos no estándar pueden ser ignorados o malinterpretados.
• Interoperabilidad con JavaScript: La API HTMLElement.dataset está diseñada específicamente para trabajar con atributos data-*, proporcionando una forma limpia y estándar de leer datos personalizados de elementos.

La solución es sencilla: HTML proporciona el mecanismo de atributos data-* específicamente para incrustar datos personalizados en elementos. Cualquier atributo con el prefijo data- es válido en cualquier elemento HTML, y su valor es accesible en JavaScript a través de la propiedad element.dataset.

Ejemplos

❌ Inválido: Atributo currency no estándar

<span currency="USD">49.99</span>

Esto desencadena el error de validación porque currency no es un atributo reconocido para <span>.

✅ Corregido: Usando un atributo data-currency

<span data-currency="USD">49.99</span>

El atributo data-currency es HTML válido. En JavaScript, puedes acceder a su valor así:

const span = document.querySelector('span');
console.log(span.dataset.currency); // "USD"

✅ Alternativa: Usando data-* con marcado más rico

Si necesitas transmitir información más estructurada, puedes combinar múltiples atributos data-*:

<span class="price" data-currency="EUR" data-amount="29.99">€29.99</span>

✅ Alternativa: Usando microdatos o marcado estructurado

Para SEO y datos legibles por máquinas, considera usar vocabularios establecidos como Schema.org:

<span itemscope itemtype="https://schema.org/MonetaryAmount">
  <meta itemprop="currency" content="USD">
  <span itemprop="value">49.99</span>
</span>

Este enfoque proporciona significado semántico que los motores de búsqueda y otros consumidores pueden entender, mientras se mantiene como HTML completamente válido.

Más información:

MDN Reference

MDN: data attributes

→