WebReference.com - Part 2 of chapter 1 of Cascading Style Sheets: Separating Content from Presentation, from glasshaus (5/7)

[previous] [next]

Cascading Style Sheets

The Separation of Structure and Presentation

In this chapter I've given you a short history of the Web, told you how using HTML as a presentation language is injurious to your sites and the Web as a whole, and introduced you to the basics of using CSS for web page presentation. I want to leave you with perhaps the most important information so far: the reasons you as a web professional should want CSS. What will you get out of it?

An important principle that underlies all the arguments in favor of CSS is referred to as "The Separation of Structure and Presentation" or sometimes "The Separation of Content and Presentation".

This separation of markup (structure and content) and style rules (presentation) is valuable to the web professional in many ways, as you'll soon see.

Earlier I told you how HTML used as a presentation language results in several negative consequences, including decreased accessibility, degraded performance, and increased production work. Now I'll detail how "The Separation of Structure and Presentation", using sound structural HTML markup with CSS for presentation, results in the following benefits:

• Increased accessibility
• Improved performance
• Decreased production work

Accessibility

Accessibility is all about making your web page available to the maximum number of users and Internet devices. With sound structural markup, your HTML pages are accessible and understandable to the widest possible audience, including site visitors with older browsers, next year's visitors using new browsers that are yet to be released, blind visitors who rely on screen readers to access your site, and last but not least, indexing agents.

"What is sound structural markup?" you ask. Well, let's take a look at an example of bad markup:

<font size="5" 
      face="Arial" 
      color="green">My Page Title</font><br /><br />

In the above example, the <font> element has been used to give a page header a certain typeface, color, and size. Two <br /> elements follow to give the text the proper bottom margin. This will look as desired in most major browsers today, which gives the false impression that all is well. In fact, by using the <font> element, which communicates no information about the text "My Page Title" other than presentational directions, you've rendered the text less intelligible to both old browsers, screen readers, and indexing agents.

On the other hand, the following markup communicates a great deal of information:

<h2>My Page Title</h2>

By using the <h2> element, you've instructed all devices that parse the HTML that "My Page Title" is a header. Screen readers can give special emphasis to the text; old, current, and future browsers can render it appropriately on screen (with or without further style rules); and indexing agents, such as the spider for search engine Google that crawls the Web to add pages to the Google database, can give extra weight to the header text in their search result algorithms, which leads to your pages appearing higher in the search results for the most relevant search terms.

"But you've removed the presentational cues, and now the text is no longer green, or displayed with the Arial typeface", you say. Adding the following style rule to the document solves this problem:

h2 {
  font-family: Arial;
  color: green;
  font-size: 1.4em;
  }

In addition, now that the rule has been declared, all <h2> elements will share the same presentation without the need to surround each one with extraneous markup. This leads us to another benefit of the "The Separation of Structure and Presentation".

[previous] [next]

Created: June 20, 2002
Revised: June 20, 2002

URL: https://webreference.com/authoring/style/sheets/cssseparate/chap1/2/5.html