Skip navigation.

writing, editing, and copywriting services at meryl.net

meryl.net articles

home | about | blog | contact

Why and How of Web Standards

On November 7, 2001, iPlanet releases Netscape v4.79 and sends the Web standards world into an uproar. You may think that some people can't let go of Netscape 4.79, so what's the big deal? Jeffrey Zeldman of the Web Standards Project (WaSP) answers, "As long as there is a 'new' 4.x browser on the market, millions will use it. And the longer they use it, the longer clients will insist on 'backward–compatible' (i.e., nonstandard, frequently inaccessible) markup and code."

"Today's browsers – IE5 and higher, Netscape 6, Mozilla, Opera 5 and higher – now do a great job of supporting web standards like HTML 4, XHTML 1, and Cascading Style Sheets (CSS) Level One," said Zeldman. "Unfortunately, many Web designers and developers are still coding their sites to the non-standard quirks of 4.0 and older browsers. For the most part, this is unnecessary, and it is certainly harmful to the long-term interoperability and accessibility of the Web."

Molly E. Holzschlag, author of numerous books, says, "The W3C (World Wide Web Consortium) provides browser manufacturers, software developers, and Web developers information that can be used as specifications for applications of a given technology or technique. That we seek a greater understanding of both the terminology and details made available by the W3C can only assist us in becoming more effective as professionals. But it is ultimately our intelligent balancing of that which serves our development needs with our audience needs that will determine how we author our documents."

Top Internet thinkers are now referring much of the W3 recommendations for Web technologies such as CSS, XHTML, XML and so on, as standards. Whereas organizations like Web Standards Projects support these recommendations and encourage browser and toolmakers to do the same to ensure simple, affordable access to Web technologies for all.

As long as these aging Netscape 4.x, Internet Explorer 4 and their predecessor browsers hang around, Web designers who write perfectly clean HTML and CSS code could see their hard work turn into ugly pages on old browsers if they do not exercise care in making the transition to valid code and markup. It doesn't mean designers should toss Web standards-happy code out the door just to please everyone. Instead, work with clean markup and use a few tricks to make the pages look decent in senior browsers.


Start At the Very Beginning with X-H-T-M-L

To make the move toward Web standards, use valid XHTML (eXtensible Hypertext Markup Language) 1.0 Transitional code along with valid Cascading Style Sheets (CSS). The nice thing about taking this step is that it works with today's standards compliant browsers and tomorrow's browsers. Even some older browsers can handle it with their own quirks. Other benefits of the XHTML / CSS combination:

XHTML and CSS are as easy to learn and implement as HTML. XHTML is a matter of changing a few habits. CSS makes maintenance a cinch. Say the boss decides to change the company's colors and wishes the Web site to do the same. It's no problem because you've smartly implemented external CSS for the company's Web site. Opening one CSS file, you change the colors from the old to the new. Upload the CSS file to the company's server where all the pages link to it and reflect the color changes.

Cost savings is another benefit of using CSS. Alan K'necht founder of K'nechtology explains, "for a complex site, you might have to spend up to 5% of your development time defining and creating your style sheets. However, the moment someone says, 'I think all page titles should be a different color,' you only have to change one variable in CSS to make this change. There is no need to do an extensive search and replace and test each page to make sure the change had no other impact on the page."

K'necht says that it makes sense to use CSS when over 80% of your site's visitors are using browsers supporting CSS. That percentage may change depending on the goal of the site. He encourages reviewing logs and separating out people who just visit the Web site as opposed to those who actually buy products or gather content from the site.

X-HTML Marks the Spot

XHTML looks and acts similarly to HTML and is based on the web's super markup language, XML plus its Transitional version works well in old and new browsers.

1. DOCTYPE
First order of business is to make it a habit to add DOCTYPE and namespace at the top of all XHTML documents. This tells the browser how to interpret the rest of the page. Use the following to make the declaration:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd":gt;

and immediately follow it with the namespace declaration:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
When viewing the source code of XHTML documents, you may notice an optional XML prologue preceeding the DOCTYPE and namespace declaration that begins with <?xml>. The drawback of using this prologue is it causes problems in many browsers. If your page includes non-ASCII characters, then add a meta tag such as:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

2. Lower-case
HTML doesn't care if the markup is in upper-case, lower-case, or a mixture of the two. XHTML expects and requires all markup to be in lower-case. Most text editors allow you to convert tags to lower-case or you can use a SEARCH > REPLACE tool. Look for every <BODY&gt, <TITLE>, <P> and other tags and change them to <body>, <title&gt, and <p>.

3. Quotations
Another new habit to learn is putting "" around all attribute values such as height="100", width="50", align="left", and color="#ffffff".

4. Close All Tags
For every <p> there should be a </p> and the same goes for <li>, >ul<, and <ol>. Even "empty" tags like <br> and <img> are closed in XHTML. Instead, they get a forward slash at the end of the tag like so: <br /> <img src="picture.gif" alt="this is a picture" height="100" width="50" />. Yes, there's a space prior to the forward slash. Notice the attributes of the img tag has all quotes and includes the "alt" attribute to ensure meeting accessibility requirements. A "title" attribute is optional.

XHTML Validation

After you complete your XHTML pages, upload them to the server and validate them with W3.org's validator at or try a free validation bookmarklet (excellent!). Also, check with the WAI (Web Accessibility Initiative) and Bobby to ensure you meet accessibility laws and guidelines.

Dress Up XHTML Pages with Style

According to W3C, Cascading Style Sheets (CSS) tell the documents how to present the information on screen, in print, or how to pronounce the wording for people with visual impairments. W3C has promoted the use of style sheets since it was founded in 1994 and has created several W3C recommendations including CSS1, CSS2, XPath, and XSLT. Using style sheets with XHTML documents empowers authors and readers to influence the presentation of documents without sacrificing device-independence or adding HTML tags.

Zeldman extends the definition of CSS and what it means to developers:

  1. CSS is a standard layout language for the Web—one that controls colors, typography, and the size and placement of elements and images.
  2. Though precise and powerful, CSS is easy to author by hand.
  3. It is bandwidth-friendly technology: a single 10K CSS document can control the appearance of an entire Web site, comprising thousands of pages and hundreds of megabytes.
  4. CSS is intended by its creators (W3C) to replace HTML table-based layouts, frames, and other presentational hacks.
  5. CSS, together with other web standards such as XHTML, helps us separate style from content, making the Web more accessible, and opening it up to more powerful applications and technologies to come.

Stamping Your XHTML with CSS

There are three different ways to include CSS into your XHTML document, but we'll focus on using an external style sheet. Open your XHTML document and add the items after the <title> line into your <head> section prior to <body&gt as shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>Your Site Title</title>

<link rel="Stylesheet" href="/styles/simple.css" type="text/css" media="screen" />

<style type="text/css" media="all">@import"/styles/sophisto.css";</style>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="expires" content="-1" />
<meta http-equiv= "pragma" content="no-cache" />
<meta name="author" content="Your Name" />
<meta name="robots" content="all" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Your subject matter described." />
<meta name="keywords" content="your, key, words, here" />

</head>

Note that the links to the style sheets assume you have a directory called /styles for CSS files. Feel free to change it based on the location of the CSS files. The basic.css contains basic layout styles that any browser including old ones like Netscape 4.x can display. The sophisto.css works with standards compliant browsers including Internet Explorer 5.5 and higher, Netscape 6.0 and higher, and Opera 5 and higher.

Old browsers don't understand @import method and ignore its contents that they would otherwise mess up. This is a simple way to implement two style sheets without having to write complicated JavaScript code.


Table the Tables?

You may have heard about Web sites that are completely tableless, in other words, they don't use <TABLES>, <TR> or <TD> tags. In a perfect world, 100% CSS layouts would be the way to go. Alas, we know it is not a perfect world with the mess of browser versions out there that don't plan to go away soon.

To ensure better layout in non-CSS-compliant browsers, most sites are shooting for a combination of CSS and XHTML tables. Though using tables requires more markups thus using more bandwidth, it's possible to create valid XHTML table layouts that work with valid style sheets.

CSS Checkup

Even though you've validated your XHTML, you need to do it again for CSS under the CSS Validator or download the free CSS bookmarklet (fabulous!).

Web designers continue to implement workarounds for older browsers, but using XHTML with two CSS files and a handful of tables makes it easier to please all the browsers and users. Implementing this method will work for a long time to come since we don't foresee the older browsers disappearing anytime soon.



Posted January 7, 2002 08:57 AM :: Tags: :: Category: Web Design


Comments
home | about | privacy policy | blog | contact

© meryl.net

Creative Commons License