Document Structure
Introduction

Users often encounter compatibility problems when working with electronic documents created on different computers because the format is tied to the software and hardware used to create the document. They may not have the software required to open and work with the document. If they are able to open the file, they may find the document illegible because they don’t have the necessary fonts. The Web came into being in part to address the challenges of sharing electronic documents. HTML is a “device-independent” document format that can be read by any number of devices.

Perhaps the most fundamental attribute of a device-independent format is the ability to separate content and presentation. When content is handled separately from presentation, documents can be accessed without requiring specific fonts, operating systems, software, and display formats. Content can be read using different devices—graphical browsers, text-only browsers, speech synthesizers, printed output, PDAs, Web-enabled appliances, and so on. The actual rendering of the pages is left up to the client software.

Historically, designers avoided HTML structural elements because their display did not coincide with our design aesthetic. Instead, we used presentational formatting to gain control over visual design and layout. We used FONT and B tags instead of H1-6 tags to control the size and style of headings; we used line breaks instead of P tags to control the margin between paragraphs; we used tables to position elements on the page; we used images for page elements. This design approach became common practice, and structural markup fell by the wayside. As a result, today’s Web is a vast system for exchanging static electronic documents, and not the smart, accessible Web envisioned by its creators.

Cascading Style Sheets, or CSS, has changed all of that. CSS provides the means for designers to control page display while maintaining the separation of content and presentation. Because CSS is now well supported among modern browsers, we can abandon old practices and begin building the Web as it was intended. Presentation markup is unnecessary, as are the workarounds we once relied on to gain control over visual design. Instead, we can build Web pages using structural HTML elements, and use CSS to design their display. We can separate content and presentation by managing content in structured HTML documents and presentation in style sheets.

When we manage content and presentation separately, our design decisions need not get in the way of access. Some users require access only to content. Nonvisual users, for example, do not gain from accessing presentation information. Other users need access to content with a customized display. When our pages are free of presentation markup, users can access the content—whether rendered with our styles, user-defined styles, software-defined styles, or no styles—depending on the requirements of the user.