Deprecated HTML elements (and what to use instead)

Written by Hafsah Emekoma ✏️

Change is constant in all aspects of our lives. The world of technology, of course, is no exception. New languages, frameworks, best practices, and other standards are introduced periodically. While these changes are not always earth-shattering, we still need to keep up with them to avoid experiencing unwanted problems.

In this guide, we’ll give an overview of the changes introduced with HTML5 and propose some alternative approaches to achieve equivalent effects. We’ll also offer some tips to help you avoid using deprecated HTML elements in your apps. (Hint: it usually involves using CSS instead).

We’ll cover the following elements that are deprecated as of HTML5 (and their recommended CSS counterparts):

• <marquee> (use CSS animation instead)
• <acronym> (use <abbr> instead)
• basefont (use font family, font size, and color instead)
• <blink> (use opacity instead)
• <dir> (use <ol> and <ul> instead)
• <frame> (use <iFrame> instead)
• <strike> (use text-decoration instead)
• <center> (use text-align: center instead)

Why you shouldn’t use deprecated HTML elements

Imagine you’re running an application you built a few months back and you notice that the page is blank or continuously returns errors. What could possibly be wrong?

You look through your console and notice that a library you used has changed the procedure for importing certain things, or that some lines of code are no longer written in the correct syntax. If it’s a production website, you already know the negative effect of such an event.

Obviously, you can’t monitor everything, but you should keep your eyes and ears open for changes to some of the essential technologies that you use daily.

HTML exists in a lot of our codebase. Regardless of the framework or library used, the underlying markup language is HTML. This means that whether you write React, Vue.js, Svelte, or any of a host of other languages, you still need HTML for your website or application to function properly. Naturally, this necessitates staying abreast of changes in the HTML world.

Some elements in HTML were deprecated in HTML5. Deprecating elements means that support for them may be stopped at any time, so it is better to be on the safe side of and use more up-to-date techniques.

A number of deprecated elements are still in wide use today and serve their purposes well. These elements were deprecated not because they are bad or unuseful, but rather because there are newer alternatives that can be used instead. These alternatives can be in the form of new HTML tags or CSS styles.

Let’s review some of the major HTML elements that have fallen out of favor and highlight some suggested alternatives.

<marquee>

The <marquee> element creates scrolling content. This could be text, images, links, or other elements. To make items move or scroll on your page, you would wrap them in a <marquee> tag.

<marquee> packs a lot of functionality into a single tag. Sounds cool, right? Well, yes and no.

While the marquee tag makes it easy to create animated content, it is also presentational in nature, which is not what is required of an HTML element. The element does not clearly define what its content is. It also creates issues for people using assistive technologies.

Apart from being pleasant to the eyes in some instances, moving elements on a page using the marquee created a poor user experience. It was difficult to read the text or see the items in the marquee as well as click on them. Some people created marquees that had links nested in them which obviously made it difficult to access such links.

Does this mean we can no longer create moving content? Of course not. Creating moving objects can be fun, so we can still implement the marquee effect without using a deprecated element.

Use CSS animation instead of <marquee>

CSS animation enables you to create the marquee effect and make it user-friendly by using the prefers-reduced-motion media query to stop all animations for those who don’t want them. You can also make the animations pause based on the user’s actions.

Let’s make the animation pause when a user hovers over it using the CSS animation-play-state: paused property on hover:

 <!-- Using the marquee element -->
    <marquee>This uses the marquee element</marquee>

    <!-- Using CSS to create it -->
    <p class="moving-text">This is made with CSS</p>

    <!-- The styles -->
    <style>

        /* Makes the animation pause on hover */
        .moving-text:hover{
            animation-play-state: paused;
        }

        /* The animation */
        @keyframes marquee{
            0%{transform: translateX(100%);}
            100%{transform: translateX(-100%);}
        }

        /* media query to enable animation for only those who want it */
        @media (prefers-reduced-motion: no-preference) {
            .moving-text{
                animation: marquee 15s linear infinite;
            }
        }
    </style>

In the snippet above, you’ll notice that it only takes a single line of code to achieve the scrolling effect using the <marquee> element whereas doing the same with CSS requires several lines of code. Still, the recommended best practice today is to create styles and presentational effects using CSS.

<acronym>

Sometimes it’s easier to write the acronym or abbreviation of a word rather than its full text. For example, you don’t want to continuously write “HyperText Markup Language” when you can simply use “HTML.” But you also want your readers to know what the shortened text means.

That’s where the <acronym> tag came in. This tag enabled you to display the acronym and also showed the full meaning of the abbreviated text on hover. With the help of the title attribute it provides, while the short text is displayed, the content input in the title attribute is shown on hover.

Use <abbr> instead of <acronym>

Although <acronym> was a really helpful function, it is now deprecated, so you shouldn’t use it. Instead, you should use a new alternative that does exactly the same thing: the <abbr> tag.

The <abbr> tag shows the abbreviated word. When you hover on it, the full text or expansion shows.

To make the full text show, your <abbr> tag should have an appropriate title in the title attribute:

<acronym title="World Wide Web">WWW (This uses the acronym tag)</acronym>

<abbr title="World Wide Web">WWW (This uses the abbr tag)</abbr>

The code snippet above shows how to use both elements. Each has the same output.

basefont

When you need to apply default styles to all elements on a webpage, basefont used to be the go-to.

basefont sets the default font family, font size, and color of all the text context in an HTML document. It is applied to all of the document’s content. All of your page’s content is displayed as specified in the basefont element unless another style is specifically applied to them.

As mentioned earlier, the HTML document is not meant to control the presentation of the page; that’s what CSS is for. It’s very easy to achieve what the basefont element does with CSS.

Use font family, font size, and color instead

You can duplicate the effects of basefont by styling the page’s body element and using the font family, font size, and color properties available in CSS:

<body>
    <!-- how the basefont is used -->
    <basefont face = "cursive,serif" color = "green" size = "4"/>

    <p>Using the HTML base font</p>

    <p>Using CSS</p>

    <!-- the CSS alternative -->
    <style>
        body{
            font-family: cursive;
            color: green;
            font-size: 1rem;
        }
    </style>

</body>

<blink>

The <blink> tag’s function is to create a blinking effect for text enclosed within it. An element wrapped in the blink tag flashes on and off to create a blinking effect on the page.

This element was typically used to grab a visitor’s attention or for decorative purposes. It has been deprecated for various reasons.

One such reason is that it creates a bad user experience for people visiting the page. It can also cause adverse effects for people with seizures and other disabilities to be exposed to a screen with flashing colors that they cannot control.

Use the CSS opacity prop instead of <blink>

The blinking effect is presentational in nature, meaning it should be created with CSS, not HTML.

If you still want to create a blinking effect for an element on a page, you can do so with CSS animations using the opacity property. Be sure to use the prefers-reduced-motion media query to disable animations for users who don’t want animations on their screen.

<style>
  @keyframes blinker {
    50% {
      opacity: 0;
    }
  }
@media(preferes-reduced-motion: no-preference){
  .blink {
    animation: blinker 0.6s linear infinite;
  }
}
</style>

<body>
  <p class="blink">Blinking text with CSS</p>

  <blink>Created with blink element</blink>
</body>

<dir>

The <dir> element was used for listing or wrapping contents in a directory. It was basically used to contain directory titles. The items wrapped in <dir> are normally <li> elements.

Use <ol> and <ul> instead of <dir>

The <dir> tag has been deprecated in favor of several alternatives that serve the same purpose with even more functionality.

The <li> element contained in the <dir> tag has a default bullet list style type. Alternatives such as the <ol> and <ul> elements display different list styles by default based on which is used. If an ordered list <ol> element is used, the list shows with numbers, and if the unordered list <ul> is used, the default list style is a bullet.

The <ul> and <ol> elements have semantic meanings that are descriptive enough. If a <ul> tag is used, you know to expect an unordered list, and if the <ol> tag is used, you know that the list is ordered.

<!-- using the dir element -->
    <dir>
        <li>I am one</li>
        <li>I am two</li>
    </dir>

    <!-- An alternative using the ul element -->
    <ul>
        <li>I am one</li>
        <li>I am two</li>
    </ul>

While both elements require the same lines of code, let’s ensure that we use the ul which is the current web standard.

<frame>

The <frame> element describes a specific place or frame on the page where another webpage can be loaded and displayed. It enables you to display other sites within a single webpage. More than one frame can be displayed on page.

To use the <frame> element, we can wrap it in a <frameset> element, which is used to specify the layout, including the number of columns or rows it will accommodate and the size of each frame. <frameset> wraps the group of frames and styles them as a unit on the webpage.

Use <iFrame> instead of <frame>

The <frame> element is now obsolete, which means it has been entirely deleted and should not be used in your codebase. Support for the <frame> element was stopped due to performance issues and lack of accessibility for people who used screen readers.

Although you can no longer use the <frame> element to embed pages and other media items, we can achieve the same using the <iFrame> element. <iFrame> performs the same function as the <frame> element and does not need to be nested in the <frameset> tag.

The <iFrame> tag is used to display webpages and media on a page:

    <!-- Using the frame element -->
    <frameset cols="50%, 50%">
        <frame src="https://google.com"/>
        <frame src="https://logrocket.com"/>
    </frameset>

    <!-- using iframe -->
    <iframe 
        title="iframe demo"
        src="https://logrocket.com"
    ></iframe>

<strike>

The <strike> element renders text with a horizontal line through the middle. The element is used to depict content that has been deleted or is no longer relevant.

Use text-decoration instead of <strike>

<strike> is obsolete as of HTML5 and browser support for it is minimal.

To achieve the same strikethrough effect on text, you can use the <del> element or, even better, style it using the CSS text-decoration property. If you want to depict text content that has been deleted, using the <del> element is appropriate because it has semantic meaning and describes the state of the text wrapped in the tag.

If the purpose of the strikethrough effect is purely visual, using the CSS text-decoration property is your best bet.

<!-- Using the strike element -->
<strike>Using the strike element</strike>

<!--Using CSS to get same effect-->
<p>Creating same effect with CSS</p>

<style>
  p{
    text-decoration: line-through;
  }
</style>

<center>

As its name implies, the <center> element horizontally aligns content to the center. The <center> element made it very simple to center text; all you had to do was place the text in the center tag and you had a horizontally centered block of text.

Why, then, was <center> deprecated? It was deprecated due to its presentational nature. The <center> element defined how the text within it looked rather than describing what the content was. It does not say, for example, whether its content is a paragraph, a section, or an image floating in the document.

While the <center> element serves its centering purpose well, it does not fulfill its semantic role of defining its content. There is also the issue of screen readers not working well with it, among others.

Use text-align: center instead

Using the <center> tag is not the only way to get centered content on your page. You can achieve the same effect using the text-align: center property available in CSS. You can also use the margin and flexbox properties.

    <!-- Using the center element -->
    <center>Hi</center>

    <!-- Centering text using CSS -->
    <p>Hi</p>

    <style>
        p{
            text-align: center;
        }
    </style>

Conclusion

Using deprecated or obsolete elements in your code can create far-reaching, long-term problems in your codebase. For every line of code that does not contain a deprecated or obsolete element, you’ve proactively fixed an impending issue.

Rather than updating the HTML elements only after something breaks in your codebase, it’s better to keep up with changes and follow the current web standards when writing code and building for the web.

Remember that preventing problems from arising is better than having to constantly fix issues. After all, nobody wants to be that coworker or ex-employee who leaves a codebase filled with deprecated elements and errors for others to fix.

---

LogRocket: Full visibility into your web apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

Try it for free.