Acerca de este problema HTML
La especificación HTML define un conjunto específico de atributos globales (como class, id, title, style, etc.) que están permitidos en todos los elementos, además de atributos específicos de elemento para ciertas etiquetas. Cualquier atributo que no forme parte de estos conjuntos estándar y no siga la convención de atributos personalizados data-* se considera inválido y provocará un error de validación.
Este problema es especialmente común con integraciones antiguas de herramientas de terceros como ShareThis, AddThis, o widgets similares de compartir en redes sociales, particularmente cuando se integran a través de un CMS como Drupal o WordPress. Estas implementaciones antiguas dependían de atributos propietarios como displayText, st_url, y st_title directamente en elementos <span> u otros. Las versiones modernas de estas herramientas han migrado a atributos data-* válidos.
Por qué es importante
- Cumplimiento de estándares: Los atributos no estándar violan la especificación HTML, lo que significa que tu marcado es técnicamente inválido y puede comportarse de forma impredecible en diferentes navegadores.
-
Compatibilidad futura: Los navegadores podrían introducir un atributo nativo
displaytexten el futuro con un comportamiento completamente diferente, causando conflictos con tu código. - Accesibilidad: Las tecnologías de asistencia dependen de HTML bien formado. Los atributos no estándar pueden confundir a los lectores de pantalla u otras herramientas que analizan el DOM.
-
Mantenibilidad: Usar la convención estandarizada
data-*deja inmediatamente claro a otros desarrolladores que un atributo contiene datos personalizados, mejorando la legibilidad del código.
Cómo solucionarlo
-
Identifica todos los atributos no estándar en tus elementos (ej.,
displayText,st_url,st_title). -
Añade el prefijo
data-a cada uno para convertirlo en un atributo de datos personalizado válido (ej.,data-displaytext,data-st-url,data-st-title). -
Actualiza cualquier JavaScript que haga referencia a estos atributos. Si JavaScript los accede vía
element.getAttribute('displayText'), cámbialo aelement.getAttribute('data-displaytext')o usa la APIdataset(element.dataset.displaytext). -
Si usas un CMS o plugin de terceros, actualiza el plugin o módulo a su última versión, que probablemente ya use atributos
data-*válidos.
Ten en cuenta que los nombres de atributos data-* deben estar en minúsculas. Incluso si el atributo original usaba camelCase como displayText, la versión corregida debe ser data-displaytext.
Ejemplos
Inválido: Atributo no estándar en un <span>
<span class="st_sharethis" displaytext="ShareThis" st_url="https://example.com" st_title="My Page">
Share
</span>
Esto provoca errores de validación para displaytext, st_url, y st_title porque ninguno de estos son atributos HTML válidos.
Válido: Usando atributos data-*
<span class="st_sharethis" data-displaytext="ShareThis" data-st-url="https://example.com" data-st-title="My Page">
Share
</span>
Accediendo a atributos data-* en JavaScript
Si tu JavaScript dependía de los nombres de atributos antiguos, actualiza las referencias:
<span id="share-btn" data-displaytext="ShareThis">Share</span>
<script>
const btn = document.getElementById('share-btn');
// Usando getAttribute
const text = btn.getAttribute('data-displaytext');
// Usando la API dataset
const textAlt = btn.dataset.displaytext;
</script>
Válido: Usando un atributo estándar en su lugar
En algunos casos, la intención de displaytext es simplemente proporcionar una etiqueta o tooltip. Si es así, un atributo estándar como title puede ser más apropiado:
<span class="st_sharethis" title="ShareThis">Share</span>
Elige el enfoque que mejor se adapte a tu caso de uso: data-* para datos personalizados consumidos por JavaScript, o un atributo HTML semántico si ya existe uno que sirva al propósito.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.