List of Deprecated Attributes Still in Widespread Use

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Learn Development at Frontend Masters

depelements.jpg

A “deprecated” element is an element the W3C has designated as outdated. These elements should not be used and are generally considered to be “bad code”. If you use a STRICT DOCTYPE, deprecated elements will not pass validation.

The thing is, people still use them. In fact, many of them are in fairly widespread use. Why? Because they still work! Just because they are deprecated doesn’t mean they don’t work, it just means there is a “new” way to do what the deprecated element used to do (well…for the most part). Will these elements ever stop working? I’m not to say, but I tend to believe that eventually yes. Here are some of the common ones that you probably see all the time, and what to use instead.

  • align: e.g. <p align=”left”>. Still works just fine, but you really should just apply a class and give that class a style of text-align: left; Or, if you have to, apply in-line CSS like style=”text-align: left;”.
  • bgcolor: e.g. <table bgcolor=”FFF”>. I see this one all the time with many of the “copy-and-paste” code generators out there. They use it because they want to have full control over the look of whatever you are copying and pasting, and it works. But seriously, just apply a class or use style=”background-color: #FFF;”.
  • border: e.g. <img src=”#” alt=”” border=0 />. This is probably the most common of all the deprecated elements. Borders on images generally look awful on webpages and should never be set as a default without a good aesthetic reason. By default on most browsers images don’t have border, except when they are used as LINKS. Then the default is to use some kind of nasty blue border. Many people force-avoid this by putting the border=0 right inside the img element. You can much more easily and cleanly avoid this with a single line of CSS: a img {border: 0px;}.
  • height / width: e.g. <div width=150>. Not cool yo. Give that div and ID or class and put the width in the CSS where it belongs.
  • target: e.g. <a href="#" target="_blank">. Not only is it deprecated, it’s a usability faux paux. Smashing Magazine has a great quote about it:

    Visitors want to have control over everything what happens in their browser. If they’d like to open a link in a new window they will. If they don’t want to, they won’t. If your links open in a new window you make the decision which is not your decision to make.

    Note: target is fine in HTML5.

  • nowrap: e.g. <td nowrap>. This one comes from the table days when you wanted to make sure one cell of text would all stay on one line (not wrap). CSS has that one covered with the the white-space property. Just set white-space: nowrap;.

There are a few things the deprecated elements can do that there is no alternative for. Noteably:

  • Starting and ordered list on a number other than 1. with start.
  • Applying a specific value to a list item with value.
  • Target, as mentioned above, has no alternative.

Some of these may be solved with CSS3. I’m not actually 100% sure though. If you really need to use some of these deprecated elements and still want your code to validate (and properly work for that matter), make sure to a Transitional DOCTYPE.

Thanks to Kevin for pointing out my misspelling of “deprecated” (I had it as “depreciated” before this post was updated).