The following is a list of the the currently deprecated HTML tags that you should probably stop using in your markup.
While they may not be the most common, there is a chance that some websites are still using many of these in legacy software. And there is a highly likelihood that most browsers are still rendering these elements just fine in order to appease older browsers (which most of the planet relies on).
But they may become completely obsolete at some point, rendering broken webpages and potentially causing bigger issues down the line.
So if you just have to have that <blink> tag somewhere on your website, at least start considering an end of life time for it, or replacing it with CSS animations.
<applet>
The <applet> tag was used in the past to embed what are referred to as Java applets into a webpage. What are applets you may ask?
Java applets were small applications written in Java that ran on Java bytecode. During their time, they were very popular for a variety of reasons. But mainly that they were a great way to embed highly optimized applications (such as games and other 3d intensive applications) directly into a web page.
In 2013, most browsers began to phase out use of applets as the Java programming language began to drop support as well.
By Java 9, applets were completely deprecated and thus no longer supported by most modern web browsers.
<big>
The <big> tag would ideally render any text that it encloses as one font-size larger than the surrounding text.
If for example you had a paragraph with a font-size of medium, the <big> tag would render content as large.
Like with most styling HTML tags, there are better ways of accomplishing the same effect using CSS. Take the following markup for example:
<div>
This text is normal while <span class='bigger'>this text is bigger</span>
</div>
And the CSS:
.bigger{
font-size: larger;
}
This essentially renders the same result, though now you have removed styling from the markup and moved it to CSS.
<blink>
The <blink> tag was infamous in its day. Advertisers loved it and used it as much as humanly possible in order to get a users attention.
Users hated it, as it looked terrible and was a total distraction. It also had potential issues with accessibility software as most browsers could not agree on how long a 'blink' should last.
Here is an example of it running on this browser (if it renders).
If you see nothing happening with that text, then congratulations, you have a modern and stable browser.
<center>
The <center> tag is true to its name in that it centers block level content within a parent.
But again, because it is a style based element, it is deprecated and better replaced with the text-align property in CSS.
<center>This text is centered</center>
That can better be replaced with:
<div style='text-align:center'>This text is also centered</div>
<dir>
The <dir> element, or Directory element, is/was used as a container for directory files or folders.
Typically the browser would style these elements accordingly to represent the appearance of files and folders.
No current browser currently supports this tag.
<image>
The <image> tag is a relic of the past before the <img> tag took over. There isn't much known about this mysterious tag, except that you should not use it at all.
Like ever.
The official specification only states "Don't ask" in reference to this tag. Odds are that there is a colorful history behind this element that many would rather forget.
Anyhow, use the <img> tag instead. Or even the picture tag.
<listing>
The <listing> element renders any content within it without interpreting the HTML and in a monospace font.
Instead it is recommend that you use the <pre> tag in its place, or the more semantic <code> tag when rendering a programmatic language. The main difference here though being that you must escape the '<' and '>' characters yourself when doing so.
<marquee>
The <marquee> element is right up there with the <blink> tag in terms of its flashyness.
Essentially it represents a scrolling block of text in which you can control various aspects of the scroll animation, such as speed and the amount of pixels to scroll through.
Truthfully, I don't hate this element. I remember it being used often in the past and nobody really complained much.
It was eye-catching and it really did want to make you read the content as it scrolled by.
While deprecated, some browsers will still try and render this element still. Here is an example:
If the text above does nothing, then alas the <marquee> tag is a relic of the past as well.
If you can see it scroll on by though, not bad right?
<nobr>
The <nobr> tag was used to prevent its enclosing text from wrapping into another line and instead forcing the entire contents into one single line that could be scrolled if needed.
It is one of those aforementioned styling tags that we don't want to use anymore.
This is what it would normally look like:
<div>
<nobr>This is a very long line that won't be split into another ever</nobr>
</div>
Of course, now we can do the same with CSS with the white-space property being set to 'no-wrap'.
<div>
<span style='white-space:no-wrap'>This is a very long line that won't be split into another ever</span>
</div>
<plaintext>
The <plaintext> element is a non-closed element in which anything following its appearance shows up as raw text ignoring any HTML along the way.
It does not include a closing tag as mentioned and essentially runs until the end of content.
In lieu of its absence, using a <pre> tag makes much more sense as you can control the exact region of content that you want to appear as preformatted text.
<strike>
The <strike> element places a strikethrough line over its enclosing text. You might think that because it is a style element, that I'm going to say to avoid it and to use CSS instead. And you would be partially right.
There is a non-deprecated element that essentially does the same as <strike> and that would be the <s> element.
Having said that however, you can indeed use CSS instead to get the same effect:
.deleted{
text-decoration: line-through;
}
I can only assume that in some near future, the <s> tag will also go the way of the dinosaurs.
<tt>
The <tt> element (or Teletype text element) shows its enclosing text using the browsers default monospace font.
The main use of this element was to showcase text in the same way that it would appear in a fixed width display, such as text-only screen or a line printer.
In place of it, it is recommended that you use <pre> or <code> to showcase monospaced font text.
<xmp>
The <xmp> element displays the enclosed text without interpreting the HTML and using a monospaced font.
Once again, in its place it is recommended that you use either the <pre> tag or the <code> tag as they accomplish the same thing.
Many of these deprecated tags look to have been used to render preformatted content with no styling and in raw format. Which is interesting to note, as the entire purpose of the web these days is to render formatted and styled content.
As new tags get deprecated and made obsolete in the near future, this list will keep getting updated as well as a reference guide.
Walter Guevara is a software engineer, startup founder and currently teaches programming for a coding bootcamp. He is currently building things that don't yet exist.