Deprecated HTML Elements

You're using HTML elements that were retired years ago. Like building with asbestos — it works, but you really shouldn't.

What is this?

Building a website with <center>, , or <marquee> is like constructing a building with asbestos insulation. It technically works. The building stays warm. But the material has been deprecated because we found better, safer alternatives. Deprecated HTML elements were part of older versions of the spec and have been officially replaced by CSS and semantic HTML. Browsers still render them (for backward compatibility), but they cause accessibility problems, break modern tooling, and signal that your code is stuck in the past.

Why it matters

For your visitors: Deprecated elements like  and <center> carry no semantic meaning. Screen readers cannot distinguish between a  heading and regular text — they both sound the same. This strips away the structure that assistive technology needs to make your page navigable.
For your business: Using deprecated elements tells every developer who views your source code that the site was not built with modern standards. It can break in unexpected ways across browsers, complicate maintenance, and hurt SEO since search engines prefer semantic HTML.
The standard: The HTML Living Standard maintained by WHATWG (the group that defines how HTML works) marks these elements as obsolete. While no specific WCAG criterion says "don't use ," the loss of semantic structure violates WCAG 1.3.1 (Info and Relationships).

Modern semantic HTML + CSS

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

<!-- Styled text -->
<p class="text-red-500 text-lg font-bold">
  Important warning message
</p>

<!-- Bold and italic with meaning -->
<p><strong>Warning:</strong> This action is <em>permanent</em>.</p>

Deprecated HTML elements

<!-- <center> — deprecated since HTML4 -->
<center>Centered paragraph</center>

<!-- <font> — deprecated since HTML4 -->
<font color="red" size="4"><b>Important warning</b></font>

<!-- <marquee> — never standardized, universally loathed -->
<marquee>Breaking news!</marquee>

<!-- <blink> — mercifully dead -->
<blink>Look at me!</blink>

How to fix it

React / Next.js

Replace every deprecated element with its modern equivalent. Here is a conversion table:

// src/components/content.tsx

export function Content() {
  return (
    <article>
      {/* Instead of <center>, use CSS */}
      <p className="text-center">This text is centered.</p>

      {/* Instead of <font>, use CSS */}
      <p className="text-lg font-bold text-red-500">Important warning message</p>

      {/* Instead of <b> for visual bold, use <strong> for meaningful emphasis */}
      <p>
        <strong>Note:</strong> Your trial expires in 3 days.
      </p>

      {/* Instead of <i> for visual italic, use <em> for emphasis */}
      <p>
        This feature is <em>experimental</em>.
      </p>

      {/* Instead of <u> for underline (confusing — looks like a link), use CSS */}
      <p>
        <span className="underline decoration-wavy decoration-yellow-500">Highlighted term</span>
      </p>

      {/* Instead of <marquee>, just... don't. If you must scroll text: */}
      <div className="overflow-hidden">
        <p className="animate-marquee whitespace-nowrap">
          Scrolling announcement — but seriously, reconsider this.
        </p>
      </div>

      {/* Instead of <strike> or <s>, use <del> for deleted content */}
      <p>
        Price: <del>$99</del> <ins>$49</ins>
      </p>
    </article>
  );
}

Plain HTML

<!-- DEPRECATED → MODERN REPLACEMENT -->

<!-- <center> → CSS text-align -->
<!-- Before: -->
<center>Hello</center>
<!-- After:  -->
<p style="text-align: center;">Hello</p>

<!-- <font> → CSS properties -->
<!-- Before: -->
<font color="red" size="5" face="Arial">Text</font>
<!-- After:  -->
<p style="color: red; font-size: 1.5rem; font-family: Arial;">Text</p>

<!-- <marquee> → CSS animation (or better, remove it entirely) -->
<!-- Before: -->
<marquee>Scrolling text</marquee>
<!-- After:  -->
<p>Static text. Your visitors will thank you.</p>

<!-- <big> → CSS font-size -->
<!-- Before: -->
<big>Large text</big>
<!-- After:  -->
<span style="font-size: 1.25em;">Large text</span>

<!-- <strike> or <s> for deleted content → <del> -->
<!-- Before: -->
<strike>Old price</strike>
<!-- After:  -->
<del>Old price</del>

<!-- <acronym> → <abbr> -->
<!-- Before: -->
<acronym title="HyperText Markup Language">HTML</acronym>
<!-- After:  -->
<abbr title="HyperText Markup Language">HTML</abbr>

<!-- <frameset> and <frame> → just no. Use modern layouts. -->

Complete list of deprecated elements to search for and replace:

Deprecated	Replace with
`<center>`	CSS `text-align: center`
`<font>`	CSS `color`, `font-size`, `font-family`
`<marquee>`	CSS animation or remove entirely
`<blink>`	Remove entirely
`<big>`	CSS `font-size`
`<strike>`	`<del>` for deletions, CSS `text-decoration` for visual
`<tt>`	`<code>` for code, CSS `font-family: monospace`
`<acronym>`	`<abbr>`
`<frame>`, `<frameset>`	Modern layouts with CSS Grid/Flexbox
`<applet>`	Remove (Java applets are extinct)

Low impact — accessibility~0.5 paw

Deprecated elements are more of a code quality smell than a critical accessibility blocker. But the cat has standards, and using  in the current decade is not one of them.

How the cat scores this

The cat scans your HTML for any elements on the deprecated/obsolete list from the HTML Living Standard. Each instance is flagged with the element name and its modern replacement. The severity depends on impact:  and <center> are warnings because they strip semantic meaning, while <marquee> and <blink> get flagged for both deprecation and motion accessibility concerns.