HTML Obsolete Tags

HTML obsolete tags are elements that are no longer recommended for use because they have been replaced by newer, more efficient alternatives. These tags are deprecated in the latest HTML standards, such as HTML5, and may not be supported in modern browsers.

What Are Obsolete Tags?

Obsolete tags are elements that:

• Were part of earlier HTML specifications (HTML 4.01 or XHTML).
• Are now replaced by CSS, JavaScript, or other HTML5 elements.
• May still work in some browsers but are not guaranteed to be supported in the future.

Common HTML Obsolete Tags and Their Alternatives

Below are some commonly used obsolete tags and their modern replacements:

1. <font>

Purpose: Used to define text font, size, and color.

Replacement: Use CSS instead.

Example:

<!-- Obsolete -->
<font color="blue" size="3">This is blue text.</font>

<!-- Modern -->
<p style="color: blue; font-size: 16px;">This is blue text.</p>

2. <center>

Purpose: Centers the content.

Replacement: Use CSS text-align: center.

Example:

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

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

3. <b> (for bold)

Purpose: Makes text bold.

Replacement: Use CSS font-weight: bold or <strong> for semantic emphasis.

Example:

<!-- Obsolete -->
<b>This text is bold.</b>

<!-- Modern -->
<strong>This text is bold.</strong>

4. <i> (for italic)

Purpose: Makes text italic.

Replacement: Use CSS font-style: italic or <em> for semantic emphasis.

Example:

<!-- Obsolete -->
<i>This text is italic.</i>

<!-- Modern -->
<em>This text is italic.</em>

5. <u>

Purpose: Underlines text.

Replacement: Use CSS text-decoration: underline.

Example:

<!-- Obsolete -->
<u>This text is underlined.</u>

<!-- Modern -->
<p style="text-decoration: underline;">This text is underlined.</p>

6. <marquee>

Purpose: Creates scrolling text or images.

Replacement: Use CSS animations.

Example:

<!-- Obsolete -->
<marquee>Scrolling text</marquee>

<!-- Modern -->
<div style="animation: scroll 5s linear infinite;">Scrolling text</div>
<style>
  @keyframes scroll {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
  }
</style>

7. <big> and <small>

Purpose: Changes font size to big or small.

Replacement: Use CSS font-size.

Example:

<!-- Obsolete -->
<big>This text is big.</big>
<small>This text is small.</small>

<!-- Modern -->
<p style="font-size: larger;">This text is big.</p>
<p style="font-size: smaller;">This text is small.</p>

8. <strike> and <s>

Purpose: Strikes through text.

Replacement: Use CSS text-decoration: line-through.

Example:

<!-- Obsolete -->
<strike>This text is struck through.</strike>

<!-- Modern -->
<p style="text-decoration: line-through;">This text is struck through.</p>

9. <frame> and <frameset>

Purpose: Creates a frame-based layout.

Replacement: Use modern HTML5 layout techniques like <div> with CSS Flexbox or Grid.

Example:

<!-- Obsolete -->
<frameset cols="50%,50%">
  <frame src="frame1.html">
  <frame src="frame2.html">
</frameset>

<!-- Modern -->
<div style="display: flex;">
  <iframe src="frame1.html" style="flex: 1;"></iframe>
  <iframe src="frame2.html" style="flex: 1;"></iframe>
</div>

10. <basefont>

Purpose: Sets default font size, color, and face for the document.

Replacement: Use CSS styles in <style> or external stylesheets.

Example:

<!-- Obsolete -->
<basefont face="Arial" size="4" color="blue">

<!-- Modern -->
<style>
  body {
    font-family: Arial;
    font-size: 16px;
    color: blue;
  }
</style>

List of Obsolete Tags with Alternatives

 

Summary

HTML obsolete tags should be avoided as they are not supported in modern web standards. Use their recommended replacements, like CSS or semantic HTML tags, to ensure cross-browser compatibility and maintainability. Adopting modern practices improves code readability and ensures better user experiences.