3. The rise of web standards

3.1 HTML for structure, CSS for presentation

Probably the most important aspect of the W3C's HTML 4.01 specification²² is the fact that it is built around the idea of separating structure from presentation. In such a scenario, only HTML tags with a structural function remain—all presentational tags and attributes are deprecated²³ and should be replaced with layout rules defined in the Cascading Style Sheets (CSS)²⁴ language.

In order to visualize this, a schematic view of a possible HTML 4.01 + CSS setup:

HTML 4.01 document with:

appropriate HTML 4.01 doctype declaration²⁵
link to CSS file by means of a link element²⁶
document text with HTML markup outlining the text's structure. For example, <h1> for top level titles, <h2> for subtitles, <p> for paragraphs, <em> for emphasis, etc.

CSS file with:

layout information that hooks in on the structural markup in the HTML document. For example, em {color: red;} will color all emphasized text in the HTML document red.

Upon loading the HTML document, our browser follows the link to the associated CSS file and immediately applies its layout rules; the result of this process is the webpage we see in our browser window. In case the CSS file cannot be found, we get to see a webpage with a very simple, generic layout—browsers usually apply some rudimentary presentation on a structured document when it comes without associated style sheets. em elements for instance, are rendered in italics, while h1 elements are displayed in a bold and bigger font. In professional web development however, this generic presentation is usually complemented or overwritten by CSS rules. It is to be noted that the link element can also be used to refer to special print, handheld or other types of style sheets. When a webpage with such additional style sheets is printed or accessed with a mobile device, the browser will apply the relevant CSS, rearranging the page layout for an optimal result.

The strict separation between structure and presentation also has serious implications for table-based layouts. The HTML 4.01 specification's Introduction to tables²⁷ urges web developers to only use the HTML table model for displaying tabular data: “Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.” In other words, using tables for layout negatively affects visually impaired users as well as people browsing the web with a small-screen device—CSS should be used instead.

²² HTML 4.01 (1999) is a minor update of the earlier HTML 4.0 spec (1998). For an overview of the differences between HTML 3.2, 4.0 and 4.01, see http://www.w3.org/TR/REC-html40/appendix/changes.html. The HTML 4.01 spec can be found at http://www.w3.org/TR/REC-html40/.

²³ HTML 4.01 comes in three flavors: strict, transitional and frames supporting. The strict version does not allow the use of deprecated presentational tags and attributes. As such, compliance with the spec requires a complete separation of structure and layout. As the W3C calculated that web developers wouldn't want to give up all presentational markup immediately, it also introduced a transitional version of HTML 4.01, which is more forgiving. The frames supporting version of HTML 4.01 is only interesting for websites using frames, something that HTML 4.01 strict does not allow.

²⁴ CSS is a language for layouting structured HTML documents. The first version of CSS, Cascading Style Sheets level 1 (CSS 1), was created in 1996 and offered a limited set of styling possibilities. Its successor, CSS 2 (1998), is much more powerful and gives web developers a very high level of visual control over their content. In the near future, the CSS 2.1 and CSS 3 specifications are expected to further raise the bar in terms of document presentation. The CSS 2 spec can be found at http://www.w3.org/TR/REC-CSS2/; part 6 (http://www.w3.org/TR/REC-CSS2/cascade.html) has specific info about CSS' “cascading” aspect.

²⁵ A doctype (short for Document Type Declaration) comes before the <html> tag and tells the browser which HTML specification the page complies to. The doctype for HTML 4.01 is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">. In principle, pages with an HTML 4.01 Strict doctype must validate against the HTML 4.01 Strict Document Type Definition (DTD), which can be described as a machine-readable version of the HTML 4.01 specification.

²⁶ The link element defines which style sheet has to be applied on the HTML markup. Example: <link rel="stylesheet" type="text/css" media="screen" href="screen.css">

²⁷ See http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.1.