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).
The proper term is “deprecated”. Many people use the less accurate “depreciated”, just like those who use “irregardless.”
From “The World Wide Web Consortium (W3C)”
Deprecated
A deprecated element or attribute is one that has been outdated by newer constructs. Deprecated elements are defined in the reference manual in appropriate locations, but are clearly marked as deprecated. Deprecated elements may become obsolete in future versions of HTML.
http://www.w3.org/TR/html4/conform.html
Thanks Kevin. I never knew that. From Wikipedia: “Depreciated is often confused or used as a stand-in for “deprecated””
I have updated the post.
Well I guess the good thing is that I myself am guilty of only one of those tags. I still use the img border=”0″ tag. I guess i never thought of styling it. Thanks though.
Totally agree 110%. However with most CMS align=”” is still commonly used and prefered including WordPress
There is one last ‘depreciated’ that you missed…. Subject is ‘Target’ and it’s right above Smashing Magazine. Search & Replace?
Not to be picky, but you are actually reporting deprecated attributes, not elements.
I really, really hope people stop using deprecated crap, especially the <font> tag.
Thanks for the mention, Chris. I’ve taken over a seriously outdated site and have been cleaning it up. This post has helped me target some of the outdated attributes on the page and to look for more items to update.
I think, about border, that you want to mean:
a img {border: 0px;}
but now is writed:
img a {border: 0px;}
Be careful when you are spreading techinques :P
@Whack a Hack: YES. That is what I mean. The properties were out of order, I fixed it in the article. Thinking about it now, listing it as img a isn’t even possible =)
Thank you! I’ve been searching far and wide for an alternative attribute for “border” and I’ve finnaly found it! You’re a hero, lol!
see here for a full list of all the Deprecated HTML attributes. there are about 47 of them. maybe we can update this page too?
http://www.w3.org/TR/html4/index/attributes.html