The Wrong Way to Format HTML Text

Back in the days of HTML 4.0 there were several other tags that we could use to style our text. However, these tags went against the modern HTML ethos of separating content into our HTML files and styling into our CSS files. As a result they are no longer officially recognized as being valid HTML tags - the fancy technical term for this is that they are "deprecated". Nowadays all styling should be done using a combination of the tags we have already discussed and our CSS stylesheets.

Although these HTML tags are no longer valid, they do in fact still work, simply because modern web browsers are programmed to be fully backwards compatible, and as a result they will display even the oldest of HTML tags. It is worth discussing these tags because you will hear them mentioned, but please bear in mind that you should never use them, and anyone who tells you otherwise is sadly mistaken!

The <font> tag

The <font> HTML tag could be used to set various text properties such as the font face, size, color, and so on. Nowadays if you want to alter text appearance you should mark it up using one of the HTML tags previously discussed (for example the <p> or <span> tag), and set the text properties in your stylesheet (again, this will be discussed in depth in the CSS Guide so for now don't worry if you don't fully understand, just be aware that this is the method we will be using).

By using CSS rather than HTML to style our fonts, we can easily make changes to just one file and those changes will filter through every page on our website. This can save an incredible amount of time and effort, particularly if we are working on a large site.

The <center> tag

The <center> HTML tag was useful for centering text on the page. Now it has been deprecated we have to find an alternative. There is no direct replacement for this tag but we can easily replicate it by creating a <div> tag and setting the text align properties in the stylesheet. For example we might use <div id="center"> and then use our CSS stylesheet to set it up as required. Although this is slightly less elegant in appearance than the <center> tag, it is fully XHTML 1.0 compatible and should therefore be used for maximum future-proofing.

The <i> and <b> emphasizing tags

These tags were used to make text italic (<i>) or bold (<b>). They have since been replaced with the emphasis tag <em> and the strong emphasis tag <strong>. By default these tags are a direct replacement for italic and strong, but using our CSS stylesheet we can alter them so that they behave in any way we want. For example we might want our <strong> tag to display in bright red rather than in bold, and this is a simple alteration to make. This makes the <em> and <strong> tags a bit more flexible than the <i> and <b> tags, which can only be a good thing.

The <strike>, <s>, and <u> tags

Both <strike> and <s> do the same thing - they put a line through the middle of our text, known as a strikethrough. The <u> tag was used to underline text. All of these HTML tags are now deprecated, and you should now use <span> tags in their place. For example you might use <span id="underline">, and then set the text underlining properties using CSS. It is worth noting that we must use the inline <span> tag here rather than <div>; using a <div> tag would produce a line break, which would spoil the flow of our text.

That's about it

Those are the main deprecated HTML tags that you have to worry about, there are a few more but they're quite obscure and you probably won't ever need to use them. In any case, using the skills you're learning here you'll easily be able to create a tag to do whatever you want anyway!