SiteLint documentation and guidelines

Obsolete html elements

Description

Obsolete HTML elements are elements that have been removed from the HTML specification or are no longer recommended for use. These elements may still work in some browsers but are not guaranteed to be supported in the future. Using obsolete elements 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 elements, leading to incomplete or inaccessible content.
  • Cognitive Disabilities: Users with cognitive disabilities benefit from clear, consistent, and modern web practices. Obsolete elements 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 obsolete elements.

Why It Matters

Using modern, supported HTML elements ensures that web content is accessible, maintainable, and future-proof. Obsolete elements 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

Common Obsolete Elements and Their Replacements

<font> Element

Used to style text, but is now obsolete. Use CSS for styling instead.

Example
<!-- Obsolete -->
<font color="red" size="3">This is red text</font>

<!-- Modern Replacement -->
<span style="color: red; font-size: medium;">This is red text</span>

<center> Element

Used to center-align text, but is now obsolete. Use CSS for alignment instead.

Example
<!-- Obsolete -->
<center>This text is centered</center>

<!-- Modern Replacement -->
<div style="text-align: center;">This text is centered</div>

<marquee> Element

Used to create scrolling text, but is now obsolete. Use CSS animations or JavaScript for similar effects.

Example
<!-- Obsolete -->
<marquee>This text scrolls</marquee>

<!-- Modern Replacement -->
<div class="marquee">This text scrolls</div>
<style>
  .marquee {
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 10s linear infinite;
  }
  @keyframes marquee {
    from { transform: translate(100%, 0); }
    to { transform: translate(-100%, 0); }
  }
</style>

<big> and <small> Elements

Used to adjust font size, but are now obsolete. Use CSS for font sizing instead.

Example
<!-- Obsolete -->
<big>Big text</big>
<small>Small text</small>

<!-- Modern Replacement -->
<span style="font-size: larger;">Big text</span>
<span style="font-size: smaller;">Small text</span>

<frame> and <frameset> Elements

Used to create frames, but are now obsolete. Use <iframe> or CSS grid/flexbox for layout instead.

Example
<!-- Obsolete -->
<frameset cols="50%,50%">
  <frame src="frame_a.html">
  <frame src="frame_b.html">
</frameset>

<!-- Modern Replacement -->
<iframe src="frame_a.html" style="width: 50%; height: 100%;"></iframe>
<iframe src="frame_b.html" style="width: 50%; height: 100%;"></iframe>

<u> Element

Previously used to underline text, now considered obsolete in favor of semantic HTML and CSS.

Example
<!-- Obsolete -->
<u>Underlined text</u>

<!-- Modern Replacement -->
<span style="text-decoration: underline;">Underlined text</span>

How to Fix It

  • Use CSS for Styling: Replace obsolete styling elements with CSS.
  • Use Semantic HTML: Replace non-semantic elements with appropriate semantic HTML elements.
  • Modern JavaScript and CSS Techniques: Use modern JavaScript and CSS techniques for interactivity and animation.

Known Limitations

  • Legacy Browser Support: Some legacy browsers may still support obsolete elements, but this is not a reason to continue using them. Focus on modern web standards.
  • Transition Period: Transitioning from obsolete elements to modern practices may require a period of adaptation and learning.
  • Testing: Ensure thorough testing across different browsers and devices to verify that replacements are functioning as expected.

Resources