# Attribute “displaytext” not allowed on element “span” at this point.

> Canonical HTML version: https://rocketvalidator.com/html-validation/attribute-displaytext-not-allowed-on-element-span-at-this-point
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The HTML specification defines a specific set of global attributes (like `class`, `id`, `title`, `style`, etc.) that are allowed on all elements, plus element-specific attributes for certain tags. Any attribute that isn't part of these standard sets and doesn't follow the `data-*` custom attribute convention is considered invalid and will trigger a validation error.

This issue is especially common with older integrations of third-party tools like ShareThis, AddThis, or similar social sharing widgets, particularly when embedded through a CMS like Drupal or WordPress. These older implementations relied on proprietary attributes such as `displayText`, `st_url`, and `st_title` directly on `<span>` or other elements. Modern versions of these tools have since migrated to valid `data-*` attributes.

## Why This Matters

- **Standards compliance:** Non-standard attributes violate the HTML specification, meaning your markup is technically invalid and may behave unpredictably across browsers.
- **Forward compatibility:** Browsers could introduce a native `displaytext` attribute in the future with entirely different behavior, causing conflicts with your code.
- **Accessibility:** Assistive technologies rely on well-formed HTML. Non-standard attributes can confuse screen readers or other tools that parse the DOM.
- **Maintainability:** Using the standardized `data-*` convention makes it immediately clear to other developers that an attribute holds custom data, improving code readability.

## How to Fix It

1. **Identify all non-standard attributes** on your elements (e.g., `displayText`, `st_url`, `st_title`).
2. **Prefix each one with `data-`** to convert it into a valid custom data attribute (e.g., `data-displaytext`, `data-st-url`, `data-st-title`).
3. **Update any JavaScript** that references these attributes. If JavaScript accesses them via `element.getAttribute('displayText')`, change it to `element.getAttribute('data-displaytext')` or use the `dataset` API (`element.dataset.displaytext`).
4. **If using a CMS or third-party plugin**, update the plugin or module to its latest version, which likely uses valid `data-*` attributes already.

Note that `data-*` attribute names should be all lowercase. Even if the original attribute used camelCase like `displayText`, the corrected version should be `data-displaytext`.

## Examples

### Invalid: Non-standard attribute on a `<span>`

```html
<span class="st_sharethis" displaytext="ShareThis" st_url="https://example.com" st_title="My Page">
  Share
</span>
```

This triggers validation errors for `displaytext`, `st_url`, and `st_title` because none of these are valid HTML attributes.

### Valid: Using `data-*` attributes

```html
<span class="st_sharethis" data-displaytext="ShareThis" data-st-url="https://example.com" data-st-title="My Page">
  Share
</span>
```

### Accessing `data-*` attributes in JavaScript

If your JavaScript relied on the old attribute names, update the references:

```html
<span id="share-btn" data-displaytext="ShareThis">Share</span>
<script>
  const btn = document.getElementById('share-btn');

  // Using getAttribute
  const text = btn.getAttribute('data-displaytext');

  // Using the dataset API
  const textAlt = btn.dataset.displaytext;
</script>
```

### Valid: Using a standard attribute instead

In some cases, the intent of `displaytext` is simply to provide a label or tooltip. If so, a standard attribute like `title` may be more appropriate:

```html
<span class="st_sharethis" title="ShareThis">Share</span>
```

Choose the approach that best matches your use case — `data-*` for custom data consumed by JavaScript, or a semantic HTML attribute if one already serves the purpose.