H.dev

Obsolete HTML Tags

Hero

Obsolete HTML Tags Explore the graveyard of web development! Learn about the old, deprecated HTML tags that you should completely avoid using in modern web development. Learning Outcomes: Identify deprecated tags and understand why CSS is the modern replacement. Prerequisites: Basic understanding of HTML and CSS. Reading Time: 3 min read Difficulty: Beginner

Introduction

HTML has evolved massively since its invention in the early 1990s. Back then, CSS didn't even exist! To make text bold, red, or centered, developers had to use specific HTML tags. However, when HTML5 was released, it brought a strict philosophy: HTML is for structure, CSS is for styling. Because of this, dozens of old styling tags were officially marked as "obsolete" (deprecated).

Why This Matters

As you build projects for himubey.in or review code during a technical interview, you might stumble across an ancient codebase from 2005. Knowing which tags are obsolete ensures you don't accidentally copy bad practices, and proves you understand modern web standards.

Core Concepts

When a tag is "obsolete," it means the official HTML specification no longer supports it. While modern browsers might still render them out of pity for old websites, using them in new projects is considered a terrible practice.

Famous Obsolete Tags to Avoid:

  • <font>: Used to change font size, face, and color. Replacement: CSS color and font-family.
  • <center>: Used to center-align content horizontally. Replacement: CSS text-align: center or display: flex.
  • <marquee>: Used to make text aggressively scroll across the screen (the absolute worst trend of the 90s). Replacement: CSS Animations.
  • <big>: Used to make text larger. Replacement: CSS font-size.
  • <strike>: Used to draw a line through text. Replacement: The semantic <s> tag or CSS text-decoration: line-through.

Syntax

Let's compare the dark ages to modern development.

<!-- ❌ OBSOLETE: Do not write code like this! -->
<center>
  <font color="red" face="Arial">
    <marquee>Welcome to the 90s!</marquee>
  </font>
</center>

<!-- ✅ MODERN: Semantic HTML + CSS -->
<div style="text-align: center; color: red; font-family: Arial;">
  <!-- We use CSS animations for the marquee effect now -->
  <p class="scrolling-text">Welcome to the future!</p>
</div>

Real World Example

Imagine a client asks Himanshu Dubey to modernize their 20-year-old e-commerce website. The old code looks like this:

<!-- Ancient, deprecated code -->
<h1><strike>Price: ₹500</strike></h1>
<h2><font color="green">New Price: ₹300</font></h2>

Himanshu would refactor it using modern, semantic HTML and CSS classes:

<!-- Modern, semantic code for himubey.in -->
<h1 class="text-gray-500 line-through">Price: ₹500</h1>
<h2 class="text-green-600 font-bold">New Price: ₹300</h2>

(Notice how much cleaner the HTML is when we rely on CSS classes for the styling?)

Best Practices

  • Separation of Concerns: Never use HTML tags to change how something looks. HTML should only be used to define what something is (a paragraph, a header, a list).
  • Use Modern Replacements: If you need to bold text for visual reasons without changing its semantic importance, use <b> instead of the old styling hacks, or better yet, use CSS font-weight: bold.

Common Mistakes

Mistake: Using the <center> tag just because it's fast and easy.

<!-- WRONG: Fast, but technically invalid in HTML5 -->
<center><img src="logo.png"></center>

Correct Approach:

<!-- CORRECT: Use CSS utility classes -->
<div style="display: flex; justify-content: center;">
  <img src="logo.png">
</div>

💡 Himubey Tip

If you are ever unsure if a tag you found on Google is obsolete, check the MDN Web Docs (Mozilla Developer Network). If you see a giant red trash can icon next to the tag name, step away immediately!

Interview Questions

  1. What is the fundamental philosophical difference between HTML and CSS that caused tags like <font> to become obsolete?
  2. Which modern CSS property replaces the obsolete <center> tag?
  3. Why do modern browsers still render obsolete tags even though they are officially deprecated?

Mini Challenge

Task: Refactor the past.

  1. Look at this bad code: <font color="blue"><big>Hello</big></font>
  2. Create a clean <p> tag.
  3. Write inline CSS using the style attribute to achieve the exact same visual result (blue text, large font size) without using any obsolete tags!

Summary

The web is constantly evolving. Obsolete tags serve as a historical reminder of how chaotic early web development was. By strictly separating your HTML structure from your CSS styling, you write cleaner, faster, and more professional code.

Next Lesson

Next Lesson: HTML Character Sets

Design & Developed by Himanshu Dubey © 2026