| home / programming / css_utopia / chap4 / |    [previous][next] |
|
|
|
When you use .css files to decouple the content and look of your site, as I've just described, a curious thing begins to happen to your HTML code. Because CSS affords you complete control over the appearance of page elements, you begin to choose tags because they describe the structure and meaning of elements of the page, instead of how you want them to look. Stripped of most or all of the presentational information, your HTML code is free to capture the semantics of your site's content.
There are a number of reasons why this is a desirable state of affairs, not the least of which is how easily you can find things when you're making changes to the content of your site. The easiest way to spot a CSS site is to use the “View Source” feature in your browser—if you can make sense of the code there within 10 seconds, chances are that you're not dealing with a site that uses table-based layout and other non-semantic HTML.
Search engine optimization (SEO) is greatly assisted by semantic HTML, because the fewer presentational tags the search engine has to wade through in analyzing your site, the greater your site's keyword density—an important metric in determining your site's ranking. As we'll see, CSS lets you control the position of an element in the browser window, largely independent of its position in the HTML document. So, if you have a newsletter subscription form or some other lengthy chunk of HTML that won't mean a whole lot to a search engine, feel free to move its code to the end of your HTML document and use CSS to ensure that it is displayed near the top of the browser window.
Increasingly supported by modern browsers is a feature of the HTML <link> tag[9], which lets you restrict a linked style sheet so that it affects only the page when it's displayed by a certain type of browser or display. For instance, you could link three .css files to a page: one that defined the appearance of the page on a desktop browser, another that dictates how the page will look when printed, and yet another that controls the display on mobile devices such as Internet-connected Personal Digital Assistants (PDAs). Only by using semantic markup, and allowing the CSS to take care of the display properties, is this sort of content repurposing possible.
Last, but certainly not least, are the vast improvements to accessibility that a site can garner by using semantic markup. We'll discuss these in detail in the next section.
Should you ever have the opportunity to observe a visually impaired individual browsing the Web, I highly recommend the experience. Alternatively, get yourself some screen reader software, switch off your monitor, and see for yourself what it's like.
Heavily-designed Websites that make use of tables, images, and other non-semantic HTML for layout are extremely difficult to use when the most natural way to experience a Website is to listen to it read aloud, from top to bottom. It's not uncommon for a modern Website to inflict 30 seconds or more of nested tables opening and closing, unidentified images for layout, and other nonsense, before the actual content begins. Now, if you think that sounds mildly annoying, imagine having to listen to it for each and every page of the sites that you visit!
Semantic HTML nearly eliminates this aural garbage, because it ensures that every tag in the document has a structural meaning that's significant to the viewer (or listener). An aural browser ignores the visual formatting properties defined in the CSS, so the user need not be bothered listening to them.
On a site that used semantic markup, for example, a visually impaired user would never have to wonder if a word was bold because it was more important, or just because it looked better that way. Elements that were displayed in bold for design reasons would have that property assigned using CSS, and the aural browser would never mention it. Elements that needed additional impact or emphasis would be marked up using the semantically meaningful <strong> and <em> tags, which are displayed by default as bold and italics in visual browsers.
A complete set of guidelines exists for developers who are interested in making their sites more accessible for users with disabilities. The Web Content Accessibility Guidelines 1.0 (WCAG) is recommended reading for all Web developers, with Guideline 3 treating the idea of avoiding presentational markup in favour of semantic markup.
The WCAG is not the only specification that advocates the use of CSS for the presentation properties of HTML documents. In fact, the latest HTML standards themselves are written with this in mind!
The World Wide Web Consortium (W3C) is the body responsible for publishing Recommendations (de facto standards) relating to the Web. Here are some of the W3C Recommendations that relate to using semantic markup and CSS:
The latest (and last) major revision of the HTML Recommendation marks all non-semantic elements and attributes as deprecated[10]. The <font> tag, for example, is clearly marked as deprecated in this standard. Under the description of deprecated elements, the Recommendation has this to say:
In general, authors should use style sheets to achieve stylistic and formatting effects rather than HTML presentational attributes.
A reformulation of HTML 4 as an XML document type, XHTML lets you use HTML tags and attributes, while also benefiting from the features of XML (mixing tag languages, custom tags, etc.).
This Recommendation includes the same tags and deprecations as HTML 4.
As described in Section , “Accessibility”, the WCAG Recommendation strongly recommends using CSS and semantic markup in Web design to improve accessibility. I'll let the Recommendation speak for itself:
Misusing markup for a presentation effect (e.g., using a table for layout or a header to change the font size) makes it difficult for users with specialized software to understand the organization of the page or to navigate through it. Furthermore, using presentation markup, rather than structural markup, to convey structure (e.g., constructing what looks like a table of data with an HTML PRE element) makes it difficult to render a page intelligibly to other devices
According to many Web developers, strict standards compliance is an idealistic goal that is rarely practical. One of the primary goals of this book is to demonstrate that this is no longer true. Today's browsers provide strong support for CSS and produce more consistent results when they are fed standards-compliant code. While bugs and compatibility issues still exist, they are no more insurmountable than the bugs that face designers who rely on noncompliant code.
| home / programming / css_utopia / chap4 / | [previous][next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: March 27, 2003
Revised: June 16, 2003
URL: URL: http://webreference.com/programming/css_utopia/chap4
