HTML Guide for span

The <span> element does not have a currency attribute. Consider using custom data attributes instead, like data-currency.

The attribute displayText is not allowed on <span> elements.

This issue is commonly caused by an old integration of ShareThis via Drupal or other CMS - the old code used invalid attributes like displayText, st_url and st_title which were later changed to HTML5 custom data attributes.

The attribute st_title is not allowed on <span> elements.

This issue is commonly caused by an old integration of ShareThis via Drupal or other CMS - the old code used invalid attributes like displayText, st_url and st_title which were later changed to HTML5 custom data attributes.

The attribute st_url is not allowed on <span> elements.

This issue is commonly caused by an old integration of ShareThis via Drupal or other CMS - the old code used invalid attributes like displayText, st_url and st_title which were later changed to HTML5 custom data attributes.

A span element that conveys special meaning or interactive state must have appropriate ARIA attributes or role to be accessible and pass validation.

The span element is a generic inline container with no semantic meaning. To make it meaningful for assistive technologies (such as screen readers), ARIA attributes or a role attribute should be used when the element represents states, properties, or interactive features.

For example, in the following code the span is used to visually indicate a required field with an asterisk *, but it lacks additional semantic information:

<span class="required" aria-required="true"> *</span>

To address this, add role="presentation" (to mark it as purely visual), or use aria-hidden="true" (to hide it from assistive technology), as the asterisk does not have semantic value for screen readers. Only use ARIA required (aria-required="true") on the form control (e.g., input), not on the decorative indicator.

Recommended HTML (decorative asterisk not announced):

<span class="required" aria-hidden="true">*</span>

Alternative (if you want to announce “required”): Announce “required” with visually hidden text and use the actual aria-required="true" on the input.

<label for="name">
  Name
  <span class="required" aria-hidden="true">*</span>
  <span class="visually-hidden">Required</span>
</label>
<input id="name" name="name" aria-required="true">

This approach ensures accessibility, semantic correctness, and W3C HTML validation compliance.

A <span> tag has not been closed. Example:

<p><span>I'm forgetting something</p>
<p>Life goes on</p>