Laying the Foundation

Before you dive into CSS, your Web page needs markup structure to work with. Since you're reading this book, you've likely heard of the separation of structure and presentation. For those unfamiliar with the idea, one of the main advantages of CSS-based design is that it enables you to hook in to a well-written document structure and add an extra layer of styling to make it attractive.

Note

Knowing which element to use in any given situation requires familiarity with the basic HTML elements. We recommend Dan Cederholm's Web Standards Solutions: The Markup and Style Handbook (Friends of ED, 2004) for practical advice on using structural markup in real-world scenarios.

Formatting a Web page has long meant choosing basic HTML elements according to how they appear. If you wanted an indented paragraph, you might have wrapped the text with a <blockquote> tag to add a margin on either side. The blockquote element has a purpose, howeverit specifically designates that the content within it is a block of text, quoted from another sourcehence the name. Using it instead for generic text that isn't actually a quote, simply for the sake of the indents, means using the wrong tool for the job; CSS provides the ability to indent any element on a page.

Having a structural document basically means you've used the proper elements for the right job, and chosen them according to what they mean as opposed to how they look.

Now that CSS design is practical, the goal becomes offloading all formatting and design to the CSS file, and marking up the HTML for the purposes of structure. CSS is the design language that hooks into existing structure and applies visuals over top of it, whereas HTML dictates the structure and doesn't need to be used for design any longer.

So what do we have to gain from paying attention to proper structure? What exactly is "structure" in this context, anyway?