The Times They Are A-ChangingTo get a sense of how far from standards compliance most of today's Web sites are, we need to take a quick look back at HTML's development and examine the difficulties most sites face today. As of early 2005, the typical Web site's markup is loaded with masses of presentational markup aimed at the capabilities of the browser for which it was written (such as Internet Explorer 5 for Windows, or the utterly obsolete Netscape 4.0). In today's world of information delivery, where you want to get your content out on not just today's standards-compliant browsers, but on cell phones, PDAs, and even the door of your viewers' refrigerators, you may be unpleasantly surprised to find that your Web site's content is tightly locked in a million yards of old presentational code. A Legacy of KlugesHTML was originally intended to be used to lay out pages of text containing hyperlinks to other pages of text. It was not intended to enable complex brochure-like layouts. But as soon as the Web broke out of academia and into the mainstream, that's exactly what designers wanted to do with it. And the kluges abounded. For example, if a photographic image was considered too close to the edge of the page, a designer might use a 1-pixel-square transparent GIF image, "force-sized" with a width attribute to be much larger so that it could invisibly shove the image out into the page. Tables were also used in creative ways. Tables are an HTML element designed for laying out grids of data (like an Excel spreadsheet), but if you need to divide a page into say, a header, navigation, and content areas, then you might use a table to divide up the page, and you would drop each piece of content into a different cell of the table. Basically, it got to the point where table-based design was almost a standard in itself and was taught as good practice in untold numbers of Web books. When it comes to (ab)using HTML, I know of what I speak; I did these things for years myself, along with the rest of the world's Web developersthere was no other way. Although the end justified the means, there was an unforeseen, or simply ignored, consequence that now affects almost every Web site: the content of the world's Web pages is crammed with markup that is only there to achieve the desired presentation on a small group of soon-to-be obsolete Web browsers; it provides no actual information at all. It's safe to say that most Web pages are over 60 percent presentational markup, and the result is that the actual content is almost impossible to extract for other uses. And while we are on this sad subject . . . Let's Play Spot the Content!Take this snippet of markup from the Microsoft home page, July 1, 2004. <table cellpadding="0" cellspacing="0" width="100%" height="19" border="0" ID="Table5"> <tr> <td nowrap="true" id="homePageLink"><></td> <td><span class="ltsep">|</span></td> <td class="lt0" nowrap="true" onmouseenter="mhHover('localToolbar', 0*2+2, 'lt1')" All of this code produces just one row of buttons on this page (Figure 1.1): Figure 1.1. All of the code on the previous page generates just the four links seen in the row below the Microsoft logo. The total content of the code you just saw is in orange247 characters out of 956, or less than 26 percent. The remaining 74 percent is just gooey chocolate sauce. Except for the HRef attributes, everything inside the tags is presentation and could all be ripped out and converted into a few brief definitions in a style sheet. The table is not used to display data; its purpose is solely to line everything up. The rest of the code is mostly concerned with making rollovers work. Each link requires a class to identify it to JavaScript, a forced nowrap attribute to keep the words on the link together, and two JavaScript function callsyeah, on every link. (As an aside, rollovers are easy to create with CSS and require two simple CSS styles.) Note also that a table cell that contains a nested span with a class is required to display each tiny vertical line between the links. Please don't think I'm picking on Microsoftalmost any site you might choose is equally challenged. Today, with browsers and many other devices standardizing around XHTML and CSS, non-compliant Web sites are finding that it is difficult to deliver their existing content on these newer devices and browsers. Have you seen your home page on a handheld computer lately? The Future Will Be Here SoonSo let's leave our past, redolent with bloated markup and nested tables, far behind, and look forward. Although bringing your current Web site into the modern age may take a substantial amount of work, you can console yourself that by following the new Web standards, you can do it once and do it right. If you are starting a new site, you can do it right first time. In Stylin', you learn to future-proof your site by separating the content from the presentation; you do this by creating pages of XHTML markup with only content in them, and then, using a single line of code, you link these pages to a separate file called a style sheet, which contains the presentation rules that define how the markup should be displayed. The power of this church-and-state separation is thisyou can have different style sheets for browsers, for PDAs, for cell phones, for printing, for screen readers for the visually impaired, and so on; each style sheet causes the content to be presented in the best possible way for that use, but you only ever need one version of the XHTML content markup. As you will see, an XHTML page can automatically select the correct style sheet for each environment in which it finds itself. In this way, your write-once, use-many content becomes truly portable, flexible, and ready for whatever presentational requirements the future may bring its way. Note, however, that like any great vision of the future, there are still some current realities that we need to deal with. |
onmouseleave="mhHover('localToolbar', 0*2+2, 'lt0')">