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
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
Web documents–error-free pages that contain only tags approved by the World Wide Web Consortium (W3C), and properly authored CSS.
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 (
) to each page. A
declaration serves two purposes: First, in newer browsers such as Internet Explorer 5 for Mac and Netscape Navigator 6, the use of a
ensures that standards-compliant Web pages render correctly. (Older browsers ignore
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
attribute in table cells or the
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
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>
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 (
) and the Web Design Group (
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 (
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
attribute of the
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
tag, then children of the
tag, such as
h1, use that font and color too (unless you specify otherwise). But it doesn’t work that way in Netscape 4–styles applied to
have no effect on
The fix? When in doubt, be redundant. By spelling out what you want, you can make Netscape 4 style
the same way it styles
font-family: verdana, arial, sans-serif;
font-family: verdana, arial, sans-serif;
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,
would contain rudimentary styles any 4.0 browser could display, such as colors and font families, whereas
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
<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
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 (
) 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 (
), 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.