SiteLint documentation and guidelines

Do not use obsolete HTML elements

Description

Obsolete HTML attributes are attributes that have been deprecated and removed from the HTML specification. These attributes may still work in some browsers but are not guaranteed to be supported in the future. Using obsolete attributes can lead to accessibility issues, inconsistent behavior across browsers, and difficulties in maintaining and updating web content.

Disabilities Impacted

  • Visual impairments: users with visual impairments who rely on assistive technologies may not receive proper support for obsolete attributes, leading to incomplete or inaccessible content.
  • Cognitive disabilities: users with cognitive disabilities benefit from clear, consistent, and modern web practices. Obsolete attributes can lead to confusion and a degraded user experience.
  • Motor impairments: users with motor impairments who navigate using keyboards or other assistive devices may encounter inconsistent behavior when interacting with elements using obsolete attributes.

Why it matters

Using modern, supported HTML attributes ensures that web content is accessible, maintainable, and future-proof. Obsolete attributes can cause accessibility issues and lead to a poor user experience. Transitioning to current HTML standards helps ensure that all users, including those relying on assistive technologies, can access and interact with web content effectively.

Coding problems and solutions

Examples of obsolete attributes and their replacements

The align attribute

Used for alignment of elements. Replace with CSS.
Incorrect example
</code></pre>
<div align="center">Centered text</div>
<pre><code class="prism line-numbers lang-html" data-lang="HTML"></code></pre>
Correct example

<style>
  .text-center {
    text-align: center;
  }
</style></code></pre>
 
<pre><code class="prism line-numbers lang-html" data-lang="HTML"></code></pre>
<div class="text-center">Centered text</div>
<pre><code class="prism line-numbers lang-html" data-lang="HTML"></code></pre>

The bgcolor attribute

Used to set background color. Replace with CSS.
Incorrect example
Content
Correct example

<style>
.primary-color {
  background-color: yellow;
}
</style></code></pre>
Content

How to Fix It

  • Use CSS for styling: replace obsolete styling attributes with CSS.
  • Use modern HTML attributes: replace obsolete attributes with their modern equivalents where applicable.
  • Ensure semantic HTML: use semantic HTML elements and attributes to ensure better accessibility and maintainability.

Known limitations

  • Legacy browser support: some legacy browsers may still support obsolete attributes, but this is not a reason to continue using them. Focus on modern web standards.
  • Transition period: transitioning from obsolete attributes to modern practices may require a period of adaptation and learning. You can also use polyfills for that purpose.
  • Testing: ensure thorough testing across different browsers, devices, and screen readers to verify that replacements are functioning as expected.

Resources

Rule

  • ID: obsolete-html-elements