HTML Obsolete Tags

In the early days of the web, HTML was used for both the structure of a page and its visual styling. As the web evolved, the World Wide Web Consortium (W3C) introduced a concept called "Separation of Concerns." This means HTML should handle what the content is (structure), while CSS handles how it looks (presentation). Because of this shift, many old tags became obsolete.

HTML obsolete tags are elements that are no longer recommended for use because they have been replaced by newer, more efficient, and more accessible alternatives. While modern browsers often still render them for backward compatibility, using them in new projects is considered a poor development practice.

What Are Obsolete Tags?

Obsolete (or deprecated) tags are elements that fall into one of these categories:

• Legacy Standards: They were part of HTML 4.01 or XHTML but were officially removed in HTML5.
• Stylistic Tags: They were used only for visual styling (like colors or alignment), which is now handled exclusively by CSS.
• Poor Accessibility: They often create a bad experience for users using screen readers or mobile devices.
• Maintenance Issues: They make it difficult to change the look of a site globally because styles are hard-coded into the HTML.

Common HTML Obsolete Tags and Their Alternatives

Below are some commonly used obsolete tags and the modern, professional way to achieve the same results:

1. <font>

Purpose: Historically used to change the typeface, size, and color of text directly within the HTML.

Replacement: Define styles in your CSS file using classes or IDs. This allows you to change the font of your entire website by editing just one line of code.

Example:

<!-- Obsolete: Avoid this approach -->
<font color="blue" size="3" face="Arial">This is blue text.</font>

<!-- Modern: Using a CSS class (Recommended) -->
<style>
  .highlight-text {
    color: #0000FF;
    font-size: 16px;
    font-family: Arial, sans-serif;
  }
</style>
<p class="highlight-text">This is blue text.</p>

2. <center>

Purpose: Centers text or images horizontally on the page.

Replacement: Use the CSS text-align: center property for text, or Flexbox/Grid for more complex layouts.

Example:

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

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

3. <b> (for bold)

Purpose: Makes text bold purely for visual weight.

Replacement: Use <strong> if the text is actually important, or use the CSS font-weight property for purely visual changes.

Example:

<!-- Obsolete (Stylistic only) -->
<b>This text is bold.</b>

<!-- Modern (Semantic) -->
<strong>Warning: This is important!</strong>

4. <i> (for italic)

Purpose: Makes text italic.

Replacement: Use <em> (emphasis) for semantic importance, or CSS font-style: italic for visual styling.

Example:

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

<!-- Modern -->
<em>Please read this carefully.</em>

5. <u>

Purpose: Underlines text.

Replacement: Use CSS text-decoration: underline.

Example:

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

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

6. <marquee>

Purpose: Creates a scrolling "ticker" effect for text or images.

Replacement: Use CSS animations. The <marquee> tag is notorious for being annoying to users and impossible for people with reading disabilities to follow.

Example:

<!-- Obsolete: Don't use this! -->
<marquee>Breaking News!</marquee>

<!-- Modern: Smooth CSS Animation -->
<div class="scrolling-container">
  <p class="scrolling-text">Breaking News!</p>
</div>

<style>
.scrolling-text {
  animation: slide 10s linear infinite;
}
@keyframes slide {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}
</style>

7. <big> and <small>

Purpose: Increased or decreased the font size by one level.

Replacement: Use the CSS font-size property. Note: In HTML5, the <small> tag has been repurposed for "fine print" (like copyrights or legal disclaimers) rather than just making text smaller.

Example:

<!-- Obsolete -->
<big>Larger Text</big>

<!-- Modern -->
<p style="font-size: 1.25rem;">Controlled Large Text</p>
<footer>
  <small>&copy; 2026 rJTutorial Team. All rights reserved.</small>
</footer>

8. <strike> and <s>

Purpose: Draws a line through text to show it is no longer relevant.

Replacement: Use <del> to indicate deleted text or CSS text-decoration: line-through.

Example:

<!-- Obsolete -->
<strike>Old Price: $50</strike>

<!-- Modern (Semantic) -->
<p>Price: <del>$50</del> <strong>$30</strong></p>

9. <frame> and <frameset>

Purpose: Used to split a single browser window into multiple independent sections.

Replacement: Modern layouts use <div> with CSS Flexbox/Grid. If you must embed external content, use the <iframe> tag.

Example:

<!-- Obsolete Layout -->
<frameset cols="20%,80%">
  <frame src="menu.html">
  <frame src="main.html">
</frameset>

<!-- Modern Layout -->
<div style="display: grid; grid-template-columns: 200px 1fr;">
  <nav>Menu Content</nav>
  <main>Main Page Content</main>
</div>

10. <basefont>

Purpose: Tried to set a global font for the whole document.

Replacement: Set the font properties on the body selector in your CSS.

Example:

<!-- Obsolete -->
<basefont face="Verdana" size="2" color="black">

<!-- Modern (Best Practice) -->
<style>
  body {
    font-family: 'Verdana', sans-serif;
    font-size: 14px;
    color: #333333;
  }
</style>

List of Obsolete Tags with Alternatives

Summary

Modern web development is built on the foundation of clean, semantic HTML and powerful CSS styling. Obsolete tags like <font> and <center> represent an era when web pages were difficult to maintain and inaccessible to many users. By adopting the modern alternatives listed above, you ensure your code is future-proof, search-engine friendly, and easy for other developers to read. Stick to the standard: HTML for content, CSS for design.