1. Technology
Send to a Friend via Email

How to Avoid Deprecated HTML

Use CSS Instead


When you're trying to write valid XHTML, you need to avoid the elements that have been deprecated. Using them will result in Web pages that may not work in a future version. This is because while the tag is still part of the XHTML specification, it may not be included in the future. And if it's not included, browsers won't support it.

Many deprecated XHTML elements were deprecated in favor of CSS style sheets. And it can be very easy to use CSS instead of many of these elements.

Fonts and CSS

Font and text styles have been deprecated in HTML in favor of CSS, and this is where CSS really shines. CSS supports more options for changing font attributes than the deprecated tags it is replacing. If you are still using these tags instead of CSS you're making a huge mistake.

  • <basefont>
    You can change the color, face, and size of the fonts on your Web page with CSS. Create a base font for your body and paragraph tags with the following CSS:
    body, p {
       font: 1em Geneva;
       color: #000;
    This will create a page with a 1em black Geneva font.

  • <blackface> (WebTV)
    In WebTV/MSNTV browsers the blackface tag makes the text double-weight bold. This is easy with CSS:
    .blackface { font-weight: bolder; }
    Not all browsers support the bolder designation, but they will all turn it bolder than the surrounding text.

  • <font>
    Just like base font, you can specify the font face, color, and size with CSS. You can also define the background color behind the font, the line-height of the font, and the tracking of the font:
    body, p {
       font: 1em Geneva;
       color: #000;
       background-color: #ccc;
       line-height: 1.2em;
       letter-spacing: .2em;

Text Attributes

Some of these aren't deprecated (like <b> and <i>) but it is still possible, and often better to use style sheets for them. These affect how the text will look, not just details about the font.

  • <b>
    Bold text is created with the font-weight property in CSS.
    .bold { font-weight: bold; }
  • <i>
    Italic text is created with the font-style property in CSS.
    .italics { font-style: italic; }
  • <shadow> (WebTV)
    The shadow tag in WebTV creates a drop-shadow on the text. There is a CSS 2 property to support shadows, but currently it's not supported by any browser.
    .shadow { text-shadow: .2em .2em #ccc; }
  • <strike>
    You can do more than strike-through your text with CSS. Use the text-decoration property to do even more.
    .strike { text-decoration: line-through; }

Affect More than Text and Fonts

But CSS fixes more than just text and fonts. You can also do things like indenting, centering, and layering with CSS properties.

  • <blockquote> to indent text
    You shouldn't indent with the blockquote tag. That tag is only for long quotations.
    .indentall { margin: 15px; }
     .indentleft { margin-left: 15px; }
  • <center>
    Centering in CSS is a bit trickier, because you can only center inline content. Block content you need to center in a different way.
    .center { text-align: center; }
  • <layer>
    Layers are the trickiest because there isn't a specific property to replace them. Instead, you should define the styles of your elements and then move them around with positioning CSS properties. Use the z-index property to move your elements higher or lower in the stack order.
    .onTop { z-index: 100; }
     .onBottom { z-index: 0; }

Did you find this article useful? Post a comment.

©2014 About.com. All rights reserved.