HTML Deprecated Tags

Introduction

Deprecated HTML tags are elements from older HTML versions that the living standard no longer recommends. Many controlled fonts, colors, layout, or frames directly in markup—roles now handled by CSS and semantic HTML5.

This hub explains which tags are outdated, why they were removed, what to use instead, and how to migrate legacy pages. You will also find a full reference table, categorized lists, and six side-by-side examples with live Try It editors.

What You’ll Learn

What Are HTML Deprecated Tags?

A deprecated HTML tag is an element that was once valid but is now discouraged or removed from the HTML specification. When a tag is deprecated, authors should stop using it in new documents and plan to replace it when maintaining older code.

Most deprecated tags are presentational—they describe how content should look rather than what it means. HTML5 shifted that responsibility to CSS so markup stays semantic and accessible.

Do Deprecated Tags Still Work in Browsers?

In most cases, yes—browsers still parse and render many deprecated tags for backward compatibility. A page using <center> or <font> will usually display as expected in Chrome, Firefox, Safari, and Edge.

However, deprecated markup may fail HTML validators, behave inconsistently across browsers, break accessibility tools, and could stop working in future browser versions. Treat browser support as a grace period, not permission to keep using obsolete tags.

Why Tags Get Deprecated

HTML evolves as the web matures. Tags are deprecated or removed for several recurring reasons:

• CSS replaced presentation in markup — font sizes, colors, alignment, and spacing belong in stylesheets, not tags.
• Better semantic alternatives exist — abbr replaced acronym; del and s replaced strike.
• Security and UX concerns — framesets complicated navigation; Java applets introduced security risks.
• Platform features moved to APIs — keygen gave way to the Web Crypto API for key generation.
• Standardization cleanup — vendor-specific tags like blink and marquee were never fully standardized.

Why Knowing Deprecation Matters

If you maintain enterprise intranets, email templates, CMS exports, or codebases older than HTML5, you will encounter deprecated tags regularly. Understanding them helps you:

• Audit legacy pages without breaking existing layouts
• Plan incremental migrations to valid HTML5 + CSS
• Pass accessibility and quality audits
• Onboard developers who only know modern markup
• Avoid copying outdated patterns from old tutorials

Obsolete vs Deprecated vs Valid

These terms are often used interchangeably but mean different things in the HTML specification:

Special cases: s, u, and menu

<s> and <u> are valid HTML5. s marks content that is no longer accurate; u represents unarticulated annotation (such as a proper name in Chinese text). Neither is deprecated—do not list them alongside tags like strike or font.

<menu> was deprecated in HTML 4 but reintroduced in HTML5 for toolbar-style command groups (often with type="toolbar"). It is not fully obsolete. By contrast, <menuitem> was part of a short-lived context-menu proposal and is removed/obsolete—use standard buttons or ARIA menus instead.

📝 Deprecated Tags Reference

Complete lookup: legacy tag, original purpose, and recommended modern replacement. Tags with dedicated tutorials link to their guide.

Deprecated Tags by Category

Presentational

Controlled fonts, colors, alignment, and spacing directly in markup. Replace with CSS classes.

Frames

Split the viewport into multiple documents. Replaced by iframe or single-page apps.

Embedding

Legacy media and plugin embedding. Use modern media elements or secure JS.

Text & Code

Displayed raw or monospaced text. Use pre and code with proper escaping.

Structure & Forms

Obsolete structural and form-related elements.

Examples Gallery

Six before-and-after migrations from deprecated tags to modern HTML and CSS. Each includes View Output and Try It Yourself links.

<!-- Legacy -->
<center>Centered text</center>

<!-- Modern -->
<p style="text-align: center">Centered text</p>

<!-- Legacy -->
<font color="blue" face="Georgia, serif">Styled text</font>

<!-- Modern -->
<p class="styled">Styled text</p>

<!-- Legacy -->
<big>Larger</big> and <strike>removed</strike>

<!-- Modern -->
<span class="larger">Larger</span> and <del>removed</del>

.scroll-text {
  animation: scroll-left 8s linear infinite;
}
@keyframes scroll-left {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}

<!-- Legacy (obsolete) -->
<frameset cols="50%,50%">
  <frame src="nav.html">
  <frame src="main.html">
</frameset>

<!-- Modern -->
<iframe src="main.html" title="Main content"></iframe>

<!-- Legacy -->
<xmp><p>Hello</p></xmp>

<!-- Modern -->
<pre>&lt;p&gt;Hello&lt;/p&gt;</pre>

<p>Hello</p>

💡 Best Practices