Web Publishing Secrets

When it comes to creating your site, employing Web standards such as HTML 4, XHTML, and Cascading Style Sheets (CSS) gives you the best of all possible worlds. You can deliver your message to all Web users, no matter what browser they're using, and at the same time you can create a more pleasurable visual experience for the fortunate majority who are using modern browsers.

New browsers call for adherence to Web standards, while older browsers--such as Netscape 4, Microsoft Internet Explorer 4, and their predecessors--don't support every nicety of Web standards (see www.webstandards.org for more information). But that doesn't mean you have to give up Web standards altogether if you want to serve appropriate content and design to all.

The Care and Feeding of New Web Browsers

Today's browsers are happiest when you feed them valid Web documents--error-free pages that contain only tags approved by the World Wide Web Consortium (W3C), and properly authored CSS.

You can validate your HTML and CSS by testing your pages at a free online validation site. It's like receiving the services of a world-class HTML and CSS consultant--at no cost. You may be amazed at how many mistakes your Web pages contain--and at how easy they are to fix when an expert shows you what's wrong with them.

Is There a DOCTYPE in the House? The first step in validating your site is to assign an appropriate document type ( DOCTYPE ) to each page. A DOCTYPE declaration serves two purposes: First, in newer browsers such as Internet Explorer 5 for Mac and Netscape Navigator 6, the use of a DOCTYPE ensures that standards-compliant Web pages render correctly. (Older browsers ignore DOCTYPE declarations, just as they ignore much of everything else having to do with Web standards.) And second, you can't validate Web pages without declaring a document type.

If you're new to Web standards and validation, and if your pages use outdated elements such as the bgcolor attribute in table cells or the target attribute in links, then HTML 4.01 Transitional is likely the best document type for your pages. For more help in selecting the appropriate document type, see the Web Design Group's tutorial "Choosing a Doctype" at www.htmlhelp.com/tools/validator/doctype.html.

To declare a document type, enter its name at the very top of each HTML page, as in this example, which uses HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<title>My Totally Awesome Web Site</title>

Validate Yourself Once you've chosen an appropriate document type and uploaded your page to a Web server, the second step in the validation process is to check the pages with a free online service such as those maintained by the World Wide Web Consortium ( http://validator.w3.org ) and the Web Design Group ( www.htmlhelp.com/tools/validator/ ).

Type your Web page's URL into the forms provided by these services, and within a few seconds you'll receive either a clean bill of health or a list of errors. Fix any errors, upload the corrected page, and try again. Check your CSS for validity at http://jigsaw.w3.org/css-validator/. W3C also offers a free tool called Tidy, which can validate your pages offline and correct most errors automatically ( www.geocities.com/SiliconValley/1057/tidy.html ).

Be Kind to Old Browsers

HTML and CSS validation is the first step toward ensuring that your sites will work correctly in today's and tomorrow's standards-compliant Web browsers. Alas, validation does nothing for yesterday's browsers, whose support for Web standards is unpredictable.

For the most part, though, older browsers can handle valid HTML even if they don't fully support it. (Netscape 4 safely ignores the title attribute of the img tag, for example.) Old browsers don't fare as well with CSS. Problems range from shoddy display to outright lunacy.

Before you begin modifying your Web pages for older browsers, make sure that doing so is worth your while. Some compatibility problems aren't serious enough to warrant expending the effort necessary to correct them. For instance, you may want to live with minor rendering differences, such as extra vertical white space on a page. But you'll want to tackle more-serious problems, such as image overlap (when a browser incorrectly places images on top of your text).

Make CSS Play Well with Netscape 4 In CSS, when you style a page component, your style trickles down to the "children" of that component. For instance, if your style sheet assigns black Verdana text to the body tag, then children of the body tag, such as p and h1, use that font and color too (unless you specify otherwise). But it doesn't work that way in Netscape 4--styles applied to body have no effect on p or h1.

The fix? When in doubt, be redundant. By spelling out what you want, you can make Netscape 4 style p the same way it styles body:

body {
color: #000;
background-color: #fff;
font-family: verdana, arial, sans-serif;

p {
color: #000;
background-color: #fff;
font-family: verdana, arial, sans-serif;

Yes, p and body are identical. But this repetition is necessary for Netscape 4, even though Opera 5, Internet Explorer 5 and later, and Netscape 6 don't require it. If you use redundancy wisely, every visitor to your site will see the right fonts and colors.

Prevent Overlapping Images If an image pertains to a paragraph, you should normally include the image inside the p tag. But in some old browsers, this can cause the image to float on top of the text rather than beside it (see "Overlap Dancing"), particularly if you've used leading (line height) in your style sheet:

<p><img src="image.gif" align="left">The image will overlap this text in bad browsers.</p>

The fix is to place the image outside the p tag, even though logically it belongs inside:

<img src="image.gif" align="left">

<p>This markup avoids image overlap even in bad browsers.</p>

Hide Good Styles from Bad Browsers One approach that solves many CSS problems (including images that overlap text) is developing both a basic style sheet for unsophisticated browsers and a more advanced one for better browsers, and then linking to both. For instance, basic.css would contain rudimentary styles any 4.0 browser could display, such as colors and font families, whereas sophist.css would include advanced styles, for 5.0 and higher browsers. Once you develop the two separate style sheets, you can link each HTML page to both by placing the following links in the head, before the body tag:

<link rel=StyleSheet href="/basic.css" type="text/css" media=screen>


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

Because old browsers don't understand the @import method, they will safely ignore the sophisticated styles that they're incapable of displaying correctly. By taking advantage of this simple fact, you can deliver basic presentations to basic browsers and more-sophisticated presentations to more-capable browsers--without having to create separate versions or resorting to complex JavaScript browser detection.

And that's one of the most important benefits of working with Web standards. Used correctly, they can deliver the appropriate content and design to the widest variety of browsers and devices in the simplest, most straightforward way possible.

JEFFREY ZELDMAN ( www.zeldman.com ) is the author of Taking Your Talent to the Web: A Guide for the Transitioning Designer (New Riders, 2001) and the creative director of A List Apart ( www.alistapart.com ), a weekly online magazine for people who make Web sites.

Overlap Dancing: This sort of image overlap is caused by poor CSS support in an older browser, but it can be surprisingly easy to fix.
Shop ▾
arrow up Amazon Shop buttons are programmatically attached to all reviews, regardless of products' final review scores. Our parent company, IDG, receives advertisement revenue for shopping activity generated by the links. Because the buttons are attached programmatically, they should not be interpreted as editorial endorsements.

Subscribe to the Best of Macworld Newsletter