Obsolete Elements

Deprecated tags, why to avoid them, and modern alternatives.

Overview

Many HTML elements are deprecated and should not be used.

Key Concepts

• Deprecated Tags — Elements removed from spec
• Why Deprecated — Accessibility, semantics, maintainability
• Modern Alternatives — CSS and semantic replacements
• Browser Support — May still work but shouldn't be used
• Migration — Updating old code

Code Examples

<!-- DON'T USE THESE (deprecated) -->
<!-- <center>Centered text</center> -->
<!-- <font color="red" size="5">Colored text</font> -->
<!-- <marquee>Scrolling text</marquee> -->
<!-- <blink>Blinking text</blink> -->
<!-- <strike>Strikethrough</strike> -->
<!-- <big>Big text</big> -->
<!-- <small>Small text</small> -->

<!-- Modern alternatives -->
<p style="text-align: center;">Centered with CSS</p>
<p style="color: red; font-size: 1.5rem;">Colored with CSS</p>
<p class="marquee">Scrolling with CSS animation</p>
<p class="blink">Blinking with CSS animation</p>
<p><s>Strikethrough</s> or <del>deleted</del></p>
<p class="big">Big text</p>
<p class="small">Small text</p>

<!-- Deprecated layout tables (don't use) -->
<!-- <table><tr><td>Layout</td></tr></table> -->

<!-- Modern layout with CSS -->
<div class="layout">
  <header>Header</header>
  <main>Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

<style>
.marquee {
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.blink {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.big { font-size: 1.5em; }
.small { font-size: 0.875em; }

.layout {
  display: grid;
  grid-template: "header header" auto "main aside" 1fr "footer footer" auto / 1fr 300px;
  min-height: 100vh;
}

header { grid-area: header; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
</style>

Practice

Refactor a legacy page to replace obsolete elements with modern CSS.