• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 11. Layout with Styles > Structuring Your Pages

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

Divide logical sections of your document into div elements. In our example, we have a navigation division, that will hold the links to other pages on the site, a bg division that will contain a background image for the navigational area, and a content division that will contain the principal text and images. There is also a calendar division that will serve as a floating sidebar of upcoming events.

Put your div elements in an order that would make sense even if the CSS was not used, for example, a title at the top, followed by a table of contents, followed by the main content. While you can change the position of each element with CSS, the content will always be intelligible, regardless of the CSS. (The order depends on the situation, audience, and other factors. Think about how to keep the page useful even if the CSS layout is not used.)

Use header elements (h1, h2, etc.) consistently to identify and prioritize information on your page.

Use comments to identify different areas of your page and what they should contain.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint