An Introduction to Web Standards
What are web standards, and how do they affect the web developer? The World Wide Web Consortium (W3C) is the organization that regulates existing web technologies, including the web itself, and presents candidate releases for new ones. Since they’re the managers of the Internet’s technologies, it’s necessary to follow their recommendations, otherwise our web pages won’t work in all cases.
Let’s focus on simple HTML 4.01 (the latest version of HTML) for a moment.
The W3C released HTML 4.01 as an official W3C recommended technology on December
24th, 1999. Despite its age, HTML 4.01 and all previous versions of HTML will
always be W3C standards. This means if you use the correct document type declaration
(DTD), you can
still use HTML version 2.0! However, since older versions of HTML are so limited,
it is best to choose the latest version of HTML (new versions of HTML were also
released for other various reasons, including separation of presentational and
structural markup – that is, removing tags such as the FONT tag and replacing
them with the SPAN tag, which can be manipulated through Cascading Style Sheets).
You will notice that there are three DTDs for HTML 4.01: Transitional, Strict,
and Frameset. The DTD specifies the HTML tags that are allowed, the attributes
each tag is allowed to have, and other properties of tags, such as “non-empty”
tags (tags that have no closing tag, for example “<img>”).
The Transitional DTD allows the valid use of presentational markup. That is,
you are allowed to say:
<font size=12 face=Arial>Hello, World!</font>
and get away with it.
Upon closer examination, you’ll notice that the FONT tag is not in the Strict DTD. Why is that? The Strict DTD separates content from presentation. In other words, there is no “FONT” tag or “CENTER” tag, or any other presentational tag that affects the web page displays (with the exception of tables). You can’t change the color of your text with HTML in 4.01 Strict. As of late 1997, you shouldn’t use HTML to make your page look good. You use HTML to give meaning to your text. For example, you put each paragraph in a P tag; text you want to emphasize should be marked up with EM tags; and when you want to yell, use STRONG tags. The “B,” “I,” and “U” tags simply have no meaning to them. They might look good in your browser, but that doesn’t mean it will mean the same thing universally. In user agents for the blind, such as JAWS, the user agent reads the web page text aloud to the person at the computer. If you use presentational tags, it’s not going to do any good for people who cannot see it – the JAWS user agent will render the text normally and no emphasis will be apparent. If you use STRONG or EM tags, the user agent will read those words with emphasis or stronger emphasis. Also, there are some reasons why you shouldn’t use tables for layout. The last DTD, the frameset DTD, is essentially the Strict DTD. The only major difference is that it allows for tags such as FRAME and FRAMESET (which are not in the Strict DTD); these tags are necessary for any frameset document, but not its individual frames.
Now that you know not to use FONT tags to color your text or specify a different font face, let me explain why you shouldn’t. On December 17th, 1996, the W3C published their CSS version 1.0 recommendation. CSS, which stands for Cascading Style Sheets, is “a simple style sheet mechanism that allows authors and readers to attach style (e.g. fonts, colors and spacing) to HTML documents. The CSS language is human readable and writable, and expresses style using common desktop publishing terminology.” In short, who needs FONT tags, when you can control the global visual appearance of your document in a separate file? There is no need to add all of the TABLE, FONT, CENTER, or other presentational tags. The more HTML you use, the more your visitor has to download each time they visit your web page. This eats up extra unnecessary bandwidth, steals time from your visitor, and costs you (and possibly your visitor), more money. By specifying the location of an external file – a separate CSS document – user agents can cache the external file. This way, the user agent doesn’t have to download the CSS file every time, and you just have to specify the content of each page – the rest is already downloaded! In addition, you can specify classes in which different elements behave in a different manner. For more details, have a look at the latest version of CSS.
Web content accessibility can sometimes exceed the W3C’s reach and get into the governmental realm. In the United States, Section 508 “requires that Federal agencies' electronic and information technology is accessible to people with disabilities.” This is recommended for all web sites in general, although this was only required for Federal agencies at the time the article was written.
1. Is this practical, or am I just trying to add something else to my web page?
4. Am I designing this with the user in mind? e.g., will this make my web site difficult for people to see or read?
5. Is it guaranteed to work cross-browser and cross-platform? If not, what can I do to provide an alternative?
Second, while it seems like I’m bashing Microsoft and its Internet Explorer browser (and to an extent, I am, because of its failure to comply with W3C standards), there are better avenues for support and extensibility.
Mozilla Firefox has better debugging for scripts and error reporting than Internet Explorer (IE) and is a better browser overall; I highly recommend that it be added to the web developer’s arsenal of tools. Microsoft explored some nebulous territory in its 5.5 and later IE versions; such as the inclusion of non-recommended tags like the EMBED, MARQUEE and BGSOUND. Its MSDN reference also gives examples of invalid scripts – scripts that are only likely to work in Internet Explorer. Lastly, Microsoft added some CSS properties that aren’t helpful at all, such as the properties that allow one to color the scrollbar. Luckily, you can disable this annoyance.
The W3C encourages new ideas for its already existing technologies – new scripting ideas, new CSS properties, and so on – but most of Microsoft’s ideas were inaccessible or unnecessary. The W3C rejected many of their ideas and provided accessible alternatives instead. For example, the BGSOUND and EMBED tags have been replaced by the OBJECT tag – which still causes difficulty for Internet Explorer. On the positive side, there were some properties and scripts that had some applicable use, such as the different methods available to show transitions between various images, or the “overflow-x” and “overflow-y” properties of CSS. A few of these, I feel, could make it to the next level of DOM and CSS, with a good push in the direction of accessibility.
March 27, 2003
Revised: February 14, 2005