Structuring Your Pages

The whole point of using CSS is to separate the formatting and styling rules from the content of your page. This frees your page from rigid appearance directives and gives it the flexibility to work well in different browsers, platforms, media, and even print. Perhaps the most important aspect of a page to be styled with CSS is its structure. A reasonable, logical structure can be easily adapted for more than one kind of output device.

To structure your page:

1.	Divide logical sections of your document into `div` elements. In our example, we have wrap and screen divisions that are used to make the design liquid, a header division for the title and description of the site, a main division divided into multiple entry divisions to contain the main content, a sidebar division to house a monthly opinion in the right column and a footer division for an "about" blurb (Figure 11.2). Figure 11.2. This is the document I use throughout this chapter. There are four divisions: header, main, sidebar, and footer, enclosed in two outer wrapper divisions (wrap and screen). You can find the complete file on my Web site (see page 26).
2.	Put your `div` elements in an order that would be the most useful if the CSS were not used, for example, a title at the top, followed by the main content, followed by a sidebar. The people most likely to view your site without CSS are those using handhelds. You want to get the main content to them without making them scroll too faror load too many bytes. In addition, if search engines see your main content first, they'll be better able to properly catalog your site.
3.	Use header elements (`H1`, `h2`, etc.) consistently to identify and prioritize information on your page.
4.	Use comments to identify different areas of your page and their contents. I also use comments to identify closing `</div>` tags so I can keep them straight.

Structuring Your Pages

Figure 11.2. This is the document I use throughout this chapter. There are four divisions: header, main, sidebar, and footer, enclosed in two outer wrapper divisions (wrap and screen). You can find the complete file on my Web site (see page 26).

Figure 11.3. Here's what our example looks like with no styles at all. Thanks to its decent structure, it is perfectly intelligible, if a bit spartan.