Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Document Structure

Last updated Oct 17, 2003.

By Molly Holzschlag

The more you delve into markup and style languages, the more it becomes necessary to understand why documents should focus on structure rather than presentation. A well-structured document is one that adheres to the guidelines of the language and version it's being written to, as well as using only those elements considered to be structural.

A good way to remember the difference between what is structure and what is presentation is to ask: Does it affect color, placement, and visual design? If it does, it's very likely that element or attribute is presentational. If, however, the element or attribute in question is necessary to create a logical hierarchy to the content of the document, it's likely that it is considered structural.

Some examples of structural elements include:

  • Paragraphs

  • Breaks

  • Headers (H1–H6)

  • Lists

  • Horizontal rules

  • Tables used to display tabular data

Some examples of presentational elements and attributes are:

  • Font tags

  • Alignment attributes

  • Center tag

  • Proprietary visual tags such as blink

  • Tables used for layout

Of course, if you examine the last bullets of each set of examples, you'll see that tables used for layout are definitely presentational rather than structural. Yet, most Web sites are still developed this way. It's only been in recent years that support for CSS has become robust enough to start using it for laying out sites, and even now there are enough discrepancies to disallow the use of CSS-only layouts. As a result, most documents on the Web are either completely unstructured or partially structured, and largely presentational in origin.

But as we progress technologically, cleaning up the structure of a document becomes increasingly important. The reason is quite simple—a structured document without presentation can be styled in numerous ways and therefore delivered to numerous browsers as well as other media including print, WebTV (now known as MSNTV), alternative devices for the people with disabilities, set-top boxes, handheld devices and smart phones—even the new interactive technologies used in cars. Because of this, the concept of structure is becoming increasingly important to the Web designer—imagine writing your content once and then using style to display it anywhere! That's the ideal, and it's toward that goal that most contemporary and progressive designers are moving.

So what does a structured document look like? Typically, a very structured document contains the DOCTYPE declaration (which declares which language and language version is being used, see Listing 1) and all the necessary elements such as html, head, title, and body. From there, headers are used to denote hierarchy of information. Bear in mind that an H1 header should be used for the most important heading information on a page, not because it provides a larger typeface. The visual appearance of a header is presentation, and therefore should be handled by CSS. So in a structured environment, you use headers only in a hierarchical manner, with level 1 denoting the most important heading, and other levels progressing as needed. Then your paragraphs will be marked with paragraph tags; you might use lists, images where needed, horizontal rules if you like, and, of course, tables for tabular data and forms as required.

A structured document is typically a very clean document. Here's a look at a well-structured, simple document in HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
 "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Welcome To My Page</title>
</head>
<body>
<h1>Welcome!</h1>
<p>Hi everyone, welcome to my Web site. Here you'll find:</p>
<ul>
<li>Information about my work</li>
<li>A weblog detailing my daily adventures</li>
<li>Information about the Web</li>
</ul>
<h2>Get in touch</h2>
<p>If you'd like to get in touch, please
 <a href="mailto:molly@molly.com">email me</a>,
 I look forward to hearing from you.</p>
</body>
</html>

If you examine this document closely, you'll see that it creates a logical hierarchy. The HTML is considered the "root" element, with the body being a "parent" element to other elements, such as a header or paragraph, which become "children" to the parent element.

This hierarchy, which is referred to as a document tree, is a necessary concept to successfully apply CSS because CSS has concepts such as cascade, specificity, and inheritance. You can learn more about these concepts from the resources included later, but suffice it to say that the way CSS works is dependent upon the relationship of one element to another. Figure 1 shows the structured document example mapped out to a tree format.

Figure 1Figure 1 A document tree, beginning with the body element and showing the relationship of elements.