Deprecation

No, deprecation is not a bodily function.  HTML elements are considered to be deprecated when they are slated for obsolescence. That is to say, in the near future, using the latest browsers, they won’t work anymore.

Let’s talk for a moment about a rather popular HTML tag that is now deprecated: the <font> tag.  First, you may well ask, “Who the heck decided it should be deprecated?  It’s all through my code!”

As I mentioned before, HTML is not code; HTML is markup. Code is instructions, or representations of instructions, to the computer processor intended to direct it to perform elements of its instruction set.  Markup, on the other hand, is a way to describe how something should appear in a browser.  Markup can also describe how something should be printed, but that’s outside the scope of HTML and browsers.

As to who decides, these decisions are actually made by companies such as Microsoft who create the browsers that interpret the HTML.  But Microsoft, and others, look to an organization called the World Wide Web Consortium, or W3C (www.w3.org), to provide standards which they may, at their discretion, incorporate into their browsers and other Web-oriented software.

Basically, what this all means is that you and I are at the mercy of the browser manufacturers, who are in turn highly influenced by the W3C (if not downright coerced).  We do not get to choose the standards, but we must live with them.

“If I can’t use the <font> tag,” you whine, “then what do I use instead?”  Glad you asked.  The answer, in a nutshell, is CSS styles. I’m not going to go into a dissertation on style sheets here; rather, I will demonstrate only a couple of ways to use inline styles to replace a font tag.

Recall that I said before that in the new XHTML standard, everything is a container.  If you’re still using <font> tags, the <font> … </font> sequence is itself a container, but we’re doing away with that, right? You are probably also nesting the <font> tags inside a <p> tag, also known as a paragraph tag.  I’m not going to assume, but I really hope you are both using lowercase letters in your tags and your <p> tags are in the form of containers, not open-ended.  For example, you may already be forming your HTML thusly:

<p>My <font face=”Arial” color=”green” size=”7″>dog</font> has fleas</p>

Which, in Internet Explorer 8, assuming your default font is Times New Roman, produces:

My dog has fleas

Once your browser starts supporting the HTML 5 standard, however, this won’t work at all.  Let’s try something else.

We can still use the <p></p> container, and we are taking the defaults for “My” and for “has fleas”, so right now we don’t care about the formatting for those words.

(Note to the budding literary editors out there—oftentimes in computer stuff, especially wherever specific instructions are given as to what to type, the comma goes OUTSIDE the quote marks.  Don’t doubt me on this.)

For “dog”, on the other hand, we want Arial font, a much larger size, and we want it to be green.  First, let’s put the “dog” into a container, thusly:

<p>My <span>dog</span> has fleas</p>

Recall that <span> is an inline element, so it doesn’t jump down to the next line to display its content. This won’t get us the large, green, Arial dog we are looking for, so let’s add some style attributes to the span.  To replace the “face” attribute, we use the “font-family” attribute:

<p>My <span style=”font-family:Arial”>dog</span> has fleas</p>

Giving

My dog has fleas

It’s clear that “dog” is displayed in the different font, but it’s not as different as we’d like.  We want it much bigger, and we want it to be green.  The style attribute for the font color is the same in CSS as it is for the attribute in the <font> tag for color.  But size is another animal. If we try to specify “font-size:7” in our style, it does nothing, so we have to choose a different measurement (note also that if we tried to write “size:7”, that also would be ignored by the browser, as are most unrecognizable styles).  In this case, “font-size:3em” and “font-size:48px” will both work.  I prefer to use the px units, px meaning “pixels,” rather than the em units, em being a relative measurement referring to the size of the letter “M.”

Here’s our fully fleshed-out markup:

<p>My <span style=”font-family:Arial; color:Green; font-size:48px”>dog</span> has fleas</p>

And the result:

My dog has fleas

But let’s go one step further.  Let’s set the font and color of the rest of it, making it Comic Sans and red. You might think that if we styled the <p></p> container, it would override the styles of the <span></span> contain, but this is not the case.  The closer, more internal styles take precedence.  Here is the full styling:

<p style=”font-family:Comic Sans MS; color:#FF0000″>My <span style=”font-family:Arial; color:Green; font-size:48px”>dog</span> has fleas</p>

Did you notice that I used the named color, Green, but I used the RGB hex notation for Red?  That was just for fun.  Here’s the final rendering by the browser:

My dog has fleas

And that’s it.  We have applied a general, inline style to the paragraph, but we made the style for “dog” to be more specific and to override the general style.  In most cases, the general style would have been applied using a style sheet, but that’s beyond the scope of this posting.