Lesson 4: Don’t Touch This!
Websites, and HTML, have been around for about a decade and a half. In that time, some things have been created, and then taken away because they didn’t quite work well, or there is now a better method.
Elements and attributes in HTML that were created and then taken away are known as “deprecated”, which means “to express disapproval of” (Webster). So, it is essentially the W3C expressing disapproval of these elements and attributes. While browsers usually still know how to deal with them, it is best to avoid them.
In this lesson, we’ll cover some of these deprecated elements and attributes, and discuss the current proper way to mimic their actions.
Font and Basefont elements
The font element (<font>) element is an element that used to be required if you wanted to specify the font of a block of code in something other than the default font. The Basefont element set the base font and any font elements afterward based their changes (like size) off of the basefont.
The current way to replicate this action is to use the CSS font-family property to define what font you want to use. Not only is this the proper way, it also saves you from having to write fifty-thousand font tags all throughout your code because you can specify it in CSS and it’ll be used where ever you want. Much more convenient.
Applet element
The applet element used to be the element required to place a Java applet on a web page. Java is another web-based technology, outwardly similar to Flash. When it was first introduced, it needed this custom element to work.
The current way to include a Java applet is to use the object element (<object>) instead. The object element is a standardized element for just about any external technology that is implemented on a web page (including Flash).
Center element
The center element was used to make kittens appear from space… just kidding. The center element was used to center elements on the page.
The current way to do this is to use the CSS properties text-align or margin, depending on what you are trying to center.
Directory and Menu elements
The directory and menu elements were designed for listing multi-column directory lists and single-column menu lists. However, they render exactly like unordered lists, so they were deprecated because an unordered list is equally semantically correct.
The current way is to use unordered lists instead. The reason these were deprecated is because they were supposed to render in a way that only affected it’s look, not it’s structure, which is CSS’ department.
Isindex element
This element created a single-line text input, which is the same that the input element does when it’s type is text, so it was redundant and deprecated.
The current way is to use an input element and set it’s type to text.
Teletype, Italic, Bold, Big, Small, Strike, and Underline Elements
These elements, which have the tags <tt>, <i>, <b>, <big>, <small>, <strike>, and <u> respectively (as well as <s> which is equivalent to <strike>) are not all officially deprecated, but they are borderline. They each are used to specify font information.
The current way is to use CSS to make these font changes using various properties. Here is a short table with the appropriate property:
| Deprecated Element | CSS Property and Value |
| Teletype/Monospace | font-family: monospace |
| Italic | font-style: italic |
| Bold | font-weight: bold |
| Big | font-size: xx-large |
| Small | font-size: xx-small |
| Strike/S | text-decoration: line-through |
| Underline | text-decoration: underline |
Note on big and small: The amount that it would change varied by the browser, so it may have been a different size, but you can specify whichever you like.
Deprecated Attributes
With the standardization of CSS, a lot of attributes also went to the wayside. Below is a table that shows the deprecated attributes, what they were deprecated from, and what their CSS equivalents are. Take note that if an element contains an attribute that is deprecated, but it isn’t listed as one of the elements that it is deprecated in, then it isn’t deprecated in that element (such as the height and width attributes in the image element).
| Deprecated Attribute | Brief Description | Deprecated In | CSS Equivalent |
| align | Aligned text | <caption>, <img>, <table>, <hr>,<div>, <h1..6>, <p> | text-align: center |
| alink | Specified active link color | <body> | Specify color in the a:active rule |
| background | Specified background image | <body> | background: url(aimage.png) |
| bgcolor | Specified background color | <body>,<table>,<tr>,<td>,<th> | background-color: color |
| clear | Specifies where the next line should be. | <br> | clear: left|right|both|none |
| compact | Display the list in a more compact way | <ol>,<ul> | margin or padding |
| color | Color of the font | <basefont>,<font> | color: color |
| border | Border thickness | <img>,<object> | border: # |
| hspace | Specifies whitespace left and right | <img>,<object> | padding: 0 # |
| link | Specified link color | <body> | Specify color in the a:link rule |
| noshade | Specifes whether to use groove or not | <hr> | Use color and border |
| nowrap | Specifies whether to wrap or not | <td>, <th> | whitespace: nowrap |
| size | Specifies the size | <basefont>, <font>, <hr> | font-size for (base)font and height for hr |
| start | Specifies the starting number | <ol> | Check out this article |
| text | Color of the text | <body> | color: color |
| type | Specifies what type of bullet/number | <li> | list-style: style |
| value | Specifies the value of the list item | <li> | Same as "start" |
| vlink | Specifies the visited link color | <body> | Specify color in the a:visited rule |
| vspace | Specifies the whitespace top and bottom | <img>,<object> | padding: # 0 |
| height | Specifies the height of an item | Essentially all elements but <img> | height: # |
| width | Specifies the height of an item | Essentially all elements but <img> | width: # |
A note on the start attribute: the start attribute is one of the most widely debated deprecated attributes as to whether it is presentation (look) or structure. It is likely to make a reappearance in HTML 5 and XHTML 2.
Not Quite Deprecated
There are a handful of elements that aren’t quite deprecated, yet, but should be avoided in favor of CSS. The most notable of these is the border attribute of table, image, and object. This element is not deprecated, but should be avoided in favor of the border property in CSS.
The border property can do a lot more and specify much better borders than the border attribute, which only takes a numeric value to define it’s width. With the border attribute, you cannot specify color, style, or anything other than it’s size.
Basically, if an attribute is controls something that is presentation or look-related, it is best to avoid this attribute and use CSS instead.
Related Extra Credit
Why deprecated elements and attributes? The short answer is to make it so there are less unnecessary elements and attributes. The fewer things there are to implement, the more likely that browser manufacturers will stick to the standards and implement them properly. It’s also less for us as web developers to remember as well. While it sometimes changes how we do things, it almost always changes them for the better.
We haven’t discussed the World Wide Web Consortium (W3C) much yet, but basically they are the body that was founder by the creator of HTML and is the body that standardizes HTML, XHTML, CSS, and a few other formats. They are essentially a group of many, many highly-respected web developers, programmers, designers, etc. that discuss how they can make the current standards better.
Why do we need standards? We need standards because, back before web standards become a big topic and we just had Internet Explorer and Netscape, you would have to make a website for one browser. If you wanted it to be used in both, you would have to spend endless hours tweaking everything, checking it in one, checking it in the other, than more tweaking.
The idea behind standards is that if all browsers implement the standards 100%, your website that looks one way in one browser will look the same in the other. Now that we have well over five browsers, it’s become very important to follow standards. They help you as a web developer much more than they can hurt you.
In our next lesson, we’ll take a look at embedding interactive multimedia applications into our web pages (namely Flash).
