Skip to main content
Validación HTML

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

Acerca de este problema HTML

HTML tiene un conjunto definido de atributos globales (como class, id, title, lang, etc.) y atributos específicos de elementos que están permitidos por la especificación. Cualquier atributo que quede fuera de este conjunto — como st_url, st_title, o displayText — provocará un error de validación porque el navegador y el validador no lo reconocen como parte del estándar HTML.

El atributo st_url, junto con atributos relacionados como st_title, st_via, y displayText, se originaron en las primeras versiones de la librería de compartición social ShareThis. Estos eran atributos propietarios que el JavaScript de ShareThis leía del DOM para configurar el comportamiento de compartición. Aunque los navegadores generalmente ignoran los atributos que no entienden (por lo que la página puede parecer que funciona), usar atributos no estándar viola la especificación HTML y puede causar varios problemas:

  • Cumplimiento de estándares: HTML inválido puede llevar a comportamientos impredecibles en diferentes navegadores y futuras versiones de navegadores.
  • Accesibilidad: Los lectores de pantalla y otras tecnologías asistivas pueden no manejar correctamente los atributos no estándar, causando potencialmente confusión.
  • Mantenibilidad: El marcado no estándar es más difícil de entender y mantener para otros desarrolladores.
  • SEO: Los rastreadores de motores de búsqueda pueden penalizar o malinterpretar páginas con errores de validación significativos.

HTML5 introdujo los atributos data-* específicamente para resolver este problema. Cualquier dato personalizado que necesites adjuntar a un elemento puede usar este patrón — por ejemplo, data-st-url en lugar de st_url. La propia librería ShareThis actualizó su integración para usar atributos data-* en versiones posteriores, por lo que las implementaciones modernas ya deberían seguir este patrón.

Cómo solucionarlo

  1. Reemplazar atributos propietarios con equivalentes data-*: Convierte st_url a data-st-url, st_title a data-st-title, displayText a data-display-text, y así sucesivamente.
  2. Actualiza tu integración de ShareThis: Si estás usando una versión desactualizada de ShareThis (o un módulo/plugin de CMS desactualizado como una integración antigua de Drupal), actualiza a la versión más reciente, que usa atributos HTML5 válidos.
  3. Revisa las plantillas de tu CMS: Si los atributos inválidos están codificados directamente en una plantilla de tema o en un bloque de contenido, actualízalos manualmente.

Ejemplos

Inválido: Atributos propietarios en un <span>

<span class="st_facebook_large" displayText="Facebook" st_url="https://example.com" st_title="My Page Title"></span>
<span class="st_twitter_large" displayText="Twitter" st_url="https://example.com" st_title="My Page Title"></span>

Este marcado usa st_url, st_title, y displayText, ninguno de los cuales son atributos HTML válidos.

Válido: Usando atributos data-* en su lugar

<span class="st_facebook_large" data-display-text="Facebook" data-st-url="https://example.com" data-st-title="My Page Title"></span>
<span class="st_twitter_large" data-display-text="Twitter" data-st-url="https://example.com" data-st-title="My Page Title"></span>

Al prefijar cada atributo personalizado con data-, el marcado se convierte en HTML5 válido. Ten en cuenta que también puede que necesites actualizar el JavaScript asociado para leer desde estos nuevos nombres de atributo (por ejemplo, usando element.dataset.stUrl en lugar de element.getAttribute('st_url')).

Válido: Integración moderna de ShareThis

Si estás actualizando tu integración de ShareThis completamente, el enfoque moderno usa un patrón de marcado diferente:

<div class="sharethis-inline-share-buttons" data-url="https://example.com" data-title="My Page Title"></div>

Las versiones modernas de la librería ShareThis esperan atributos data-* por defecto, por lo que actualizar la librería y su marcado asociado es la solución más limpia. Consulta la documentación de ShareThis para el enfoque de integración recomendado más reciente para tu plataforma.

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.