Development of the HTML specification is an incremental process and sometimes things go wrong. Over time, many elements and attributes have been added to HTML only be removed at a later time when the web community collectively realized that there was a better way. Since deprecated and obsolete elements and attributes are already live on the web many modern browsers continue to support their use. Even though they may still work, you should always follow the latest version of HTML. There’s no guarantee that browser support for obsolete and deprecated elements will last.
- 1 Valid but Poorly Implemented
- 2 HTML Elements to Stop Using Immediately
- 3 Tasks Better Handled by CSS
- 4 Other Resources
Valid but Poorly Implemented
There are several cases of HTML elements and attributes that are valid and should be used, but implementation of these features has changed over time while pockets of the web development community haven’t taken notice. HTML
tables are a good example of this. At one point it was common for web page layouts to be created with the HTML
table element. Virtually no one does this anymore, CSS is far more powerful than
tables could ever hope to be. However, there are many other less egregious misuses and syntax errors committed by even experienced web developers. Here are a few perfectly valid and useful HTML features that are often misapplied and examples of their proper implementation.
While not technically an HTML element, the
DOCTYPE declaration should be the first thing to appear in every HTML document. This declaration tells the browser the language of the code in the document. In the past, this declaration included several parts and could get a little complicated. However, in HTML5, it’s quite simple:
Start every HTML document with that declaration and web browsers will know exactly what you’re trying to say.
Identifying the Character Set
Web browsers must know the character set used to write the document in order to render it properly. In the vast majority of cases, the proper character set to declare is UTF-8. If you need to declare anything else, it’s likely you already know it and know how to do it. If you aren’t sure, sticking with UTF-8 is a safe bet. Declaring the character set in HTML5 is much simpler than it was in previous versions of HTML. Here’s the proper syntax for the declaration in modern HTML5:
Just drop that line in the
head of your HTML document and you’re all set.
Linking to Copyright Info
In the past it was common for the
meta tag to be used to provide copyright information. However, this isn’t the right way to take care of this task, and web crawlers don’t recognize this off-label use of the
meta tag. The proper way to identify a copyright is to use the
link element in the
head of an HTML document like this:
<link rel="license" href="https://opensource.org/licenses/GPL-3.0">
Stop Commenting Out Scripts
In the past it was common for scripts to be added to HTML documents using a syntax that looked something like this:
There was a very good reason for this. At one point many browsers did not recognize
script tags and would attempt to render the contents between the tags as HTML, leading to them displaying the scripting in plain text. To avoid this issue, developers would comment out the text so that it wouldn’t render as HTML by unsupported browsers. Those days are far behind us. All modern browser support the
script tag to import it into the current HTML document like this:
HTML Elements to Stop Using Immediately
There are quite a few elements that were once part of the HTML specification that have since been deprecated or obsoleted. Here are eight HTML elements you might still be using that you should stop using immediately as well as alternate tags you can use instead:
applet: If you’re still using this tag, you have a bigger problem than use of a deprecated tag since Java is on its way out as a web programming language. Switch to the
embedelement in the short term, but in the long term stop using Java on the web.
bgsound: This element was once implemented by IE to add background music to websites. Background music was a bad idea from the start. Just don’t do it. If you want to add audio content to your site, use the
audiotag, but don’t set it to autoplay.
frameelement and all of it’s related elements have been removed from the HTML specification. Don’t use them. Use
iframeif you’re trying to embed an external web page and CSS if you’re trying to design a website layout.
hgroup: In the past, you could group a title and a subtitle by wrapping each in an appropriate heading level and wrapping both headings in
hgrouptags. However, this element has been deprecated. Instead, use a single heading element to contain both the title and subtitle, wrap the subtitle in
spantags, and use CSS to control the styling of the subtitle.
dir: The directory element was once part of the HTML specification and was used to represent a list of files or pages. Use an unordered list of anchor elements instead.
acronym: This element has been deprecated, use the abbreviation tag
isindex: This element created a text field on a web page. However, the same thing can be accomplished with the
inputand the attribute
type="text"rendering this tag unecessary and obsolete as of HTML 4.01.
listing: These tags were different ways of displaying text in plain text rather than as HTML. If you want to embed plain text in an HTML document you have two options,
preand ‘code’. To display text in a monospace font and to preserve whitespace use
pre, to display code use the
codeelement and escape out all
>symbols by typing
>to replace each respectively.
Tasks Better Handled by CSS
There are many elements and attributes that were once part of HTML, but performed tasks better suited to CSS. These elements have since been deprecated in favor of letting CSS control web page presentation.
Elements Replaced by CSS Properties
Control of fonts and typography was once performed with HTML elements like
u. These elements have all be deprecated in favor of font and typography controls offered by CSS. To learn more, review our tutorial on fonts and web typography. One unique tag which never really caught on is
multicol. This tag could be used to break text into multi columns similar to the appearance of a newspaper. A similar but much more powerful effect can now be created in modern browsers by using the CSS
Attributes Replaced by CSS Properties
A wide range of HTML element attributes were once available to control the presentation of HTML elements. Virtually all of these tags have been deprecated and the same functionality is now available from CSS. If you aren’t familiar with CSS and how to implement these properties our CSS tutorial will get you up and running with Cascading Style Sheets in no time. Here are some of the more commonly used attributes and the CSS properties that can now be used to achieve the same result.
align: This attribute has been replaced by a combination of powerful CSS properties including
bgcolor: Rather than apply background images and colors with these deprecated HTML attributes, use the
background-colorCSS propreties instead.
width: Use of these attributes is still valid on some elements. However, in all cases it is possible to achieve the same effect by using the CSS properties that go by the same names.
clear: If you want to force an element to clear all other elements on one or both sides use the
clearCSS property rather than the
border: While this attribute still works just fine on many elements, it’s a better practice to apply borders using the
In this article we’ve covered some of the most common elements and attributes used improperly or despite their deprecated or obsolete status. However, we really just touched the tip of the iceberg. If you want to read about the full range of HTML elements and attributes that have been removed from the HTML specification refer to these resources:
- The WHATWG list of obsolete HTML features
- The list of obsolete HTML features from the official HTML5 document