Skip to main content
Validación HTML

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

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 displaytext en 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

  1. Identifica todos los atributos no estándar en tus elementos (ej., displayText, st_url, st_title).
  2. 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).
  3. Actualiza cualquier JavaScript que haga referencia a estos atributos. Si JavaScript los accede vía element.getAttribute('displayText'), cámbialo a element.getAttribute('data-displaytext') o usa la API dataset (element.dataset.displaytext).
  4. 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.

Ayúdanos a mejorar nuestras guías

¿Te ha sido útil esta guía?

¿Listo para validar tus sitios?
Inicia tu prueba gratuita hoy.