The Early Bird Catches the CSS: Planning Structural HTML

By Virginia DeBolt

Do you struggle to make the switch to Cascading Style Sheets? Are you using some CSS but can't quite complete the transition to all CSS?

Your problem may be that you are not thinking about Cascading Style Sheets early enough in the process of making a web page. Before you even begin to think about the appearance of your web page, you need to think about the semantic or structural content of your page so that the HTML is “CSS-ready.” This article will help you start your projects by first making your HTML structurally ready for CSS.

A secondary problem that bothers some folks who are trying to switch to CSS is that they haven't made the connection between familiar HTML presentational attributes such as cellpadding, hspace, or align="left" and the equivalent presentational replacements in CSS. After you've learned how to structure your HTML for CSS, I'll show you a chart that will help you understand which properties in CSS can replace those familiar HTML attributes.

Structural Thinking

Many of us learned to make web pages by first thinking about the “look” and what images, fonts, color schemes, and graphic design elements we would use to achieve it. We launched Photoshop or Fireworks and played with the look until we knew precisely (down to the pixel) what the page would look like. Once we had that plan, we began trying to make HTML create a pixel perfect rendering of the design.

If you want your HTML page to be CSS-ready (or CSS-friendly) you need to back off from thinking about “the look” first and begin your process by thinking about the semantic meaning and structure of the content your page will hold.

The look doesn't matter.

Before you faint and fall out of your chair over that statement, let me explain. A well-structured HTML page can look like absolutely anything. The CSS Zen Garden revolutionized web design by proving that a page of HTML can be made to look like absolutely anything. The CSS Zen Garden helped us finally get it: there is power in CSS that can be used to create any presentation whatsoever out of a simple page of HTML.

HTML is not just for the computer monitor anymore. That wonderful look you created in Photoshop or Fireworks might not work at all on a PDA, or cell phone, or an aural screen reader. But a well-structured HTML page can go anywhere, work on any internet capable device, and be styled in a manner appropriate to the device with a CSS stylesheet.

Start Your Thinking

The starting point is structural. Some writers call it semantic. What those terms mean is that you need to think of your content as blocks of related meaning, or more simply, as content blocks. Think about the purpose your various content blocks will serve. Then design an HTML structure that supports the meaning and purpose of your content.

If you sat down and planned out the structural bits and pieces you wanted on a web page, you might come up with a list like this.

heading with logo and site name
main page content
global site navigation
subsection navigation
search form
utility area with shopping cart and check out
footer with legal stuff

The generic element used to provide structural context to a page of HTML is the div element. Using the div element with assigned ids for the structural parts of the page, your major structural content blocks could be:

<div id="header"></div>

  <div id="content"></div>

  <div id="globalnav"></div>

  <div id="subnav"></div>

  <div id="search"></div>

  <div id="shop"></div>

<div id="footer"></div>

It isn't a layout; it's a structure. It's a semantic organization of information into content blocks. Once you understand what your structure needs to be, adding the appropriate content in the appropriate divisions of the page becomes automatic.

A div can contain anything, even another div. Your major content blocks will contain the HTML elements you need to create your page–headings, paragraphs, images, tables, lists, and so on

By thinking first in terms of blocks of related content, you now have structural HTML elements that can be positioned and styled in any place on the page and in any way you want. Each of those content blocks in your HTML can be individually placed on the page, and assigned colors, fonts, margins, backgrounds, padding, or alignment rules.

All right. Now! You are finally ready to begin thinking about layout, about the “look” for your site. The globalnav, for example, could be in a vertical column on the left (or right), or arrayed horizontally immediately under the

header

. It could have any position or look.

A Contextual Selector is a Beautiful Thing

The use of named id attributes to set up your structural content blocks gives you CSS-ready hooks for contextual (or descendant) selectors. These divs with named ids create the context needed to write pinpoint accurate selectors for each individual element on the page, whether it is a heading, list, image, link, or paragraph. For example, you could write a CSS rule for #header img that could be completely different from a CSS rule for #content img.

Another example is that you could distinguish the links in various parts of the page from one another with rules for #globalnav a:link, or #subnav a:link, or #content a:link. Or, you could present the paragraphs in the content and footer in different ways using rules for #content p and #footer p. In structural terms, your page is built with images, links, lists, and paragraphs. These elements remain the same no matter what the internet device used to render them, and no matter what the stylesheet rules are to present them.

A carefully structured HTML page is very simple and uncluttered. Each element in the HTML being used for its logical structural purpose. Instead of using a blockquote tag to indent a paragraph that isn't truly a blockquote, you can simply use the p tag for the paragraph and write a CSS rule for that particular paragraph that will indent it using margin. The p is the structure–the margin is a presentational choice. One belongs in the HTML, one belongs in the CSS.

Well-structured pages use HTML elements with almost no presentational attributes in the tag. The code is lean. Instead of writing <table width="80%" cellpadding="3" border="2" align="left"> you simply write <table> in the HTML. The presentational rules for the table element are moved into the CSS. You can create any presentation you want for that table with CSS, but in structural terms, a table is just a table and nothing more.

Take the Basic Concept and Run with It

This basic structural conceptualization can be enlarged to fit your particular needs for content blocks. If you look at CSS styled pages, you will notice that there are often div elements holding all or several other div elements. You will see "container" divs, or "wrapper" divs and other types of nested divs, such as a structure like this:

<div id="navcontainer">
  <div id="globalnav">
   <ul>a list</ul>
  </div>
 <div id="subnav">
  <ul>another list</ul>
 </div>
</div>

The nesting of div elements, as in this example, allows you more options for CSS rules to present what is structurally just two lists. There could be a presentation rule for #navcontainer, and another for #globalnav–for example, the #navcontainer rule might center the div in a column, while the #globalnav rule might left align the text of the centered div. And, of course, there can be rules for the presentation of #globalnav ul or #globalnav li that use this structural context. The rules for the list in #subnav could be completely different in terms of presentation.

Replacement Parts

The following chart will help you make the connection between what you are familiar with in HTML and its equivalent property in CSS.

HTML attributes and the equivalent CSS properties
HTML Attributes	CSS Properties	Notes
`align="left" align="right"`	`float: left; float: right;`	With CSS anything can be floated: images, paragraphs, divs, headings, tables, lists, etc. When you float anything, be sure to assign a `width` to the element you floated.
`marginwidth="0" leftmargin="0" marginheight="0" topmargin="0"`	`margin: 0;`	With CSS, `margin` can be set for any element, not just the `body` element. More importantly, margins can be set individually for the top, right, bottom and left of any element.
`vlink="#333399" alink="#000000" link="#3333FF"`	`a:link #3ff; a:visited: #339; a:hover: #999; a:active: #00f;`	In HTML, link colors were set as an attribute of the `body` tag and applied uniformly to every link on the page. Using descendant selectors in CSS, link colors can be set to different values in different parts of a page.
`bgcolor="#FFFFFF"`	`background-color: #fff;`	In CSS, `background-color` can apply to any element, not just `body` and `table.`
`bordercolor="#FFFFFF"`	`border-color: #fff;`	Any element can have a border, the colors of which can be set individually for top, right, bottom and left if desired.
`border="3" cellspacing="3"`	`border-width: 3px;`	With CSS, any element can have a border. Borders can be set uniformly as you see them in the `table` on this page, or the size, style and color of borders can be set individually for the top, right, bottom and left (or any combination thereof) of any element. When setting the borders for tables, use the `table`, `td` or `th` selectors. When setting the spacing for tables, use the `table`, `td,` and `th` selectors. If you want a single border line between adjacent table cells, use `border-collapse: collapse;` `Border` can replace `hr` when used only as `border-top` or `border-bottom` on an element. A rule for `border-right` and `border-bottom` can simulate a drop shadow.
`<br clear="left"> <br clear="right"> <br clear="all">`	`clear: left; clear: right; clear: both;`	Many two and three column layouts use `float` to position elements on a page. If part of your presentation depends on background colors or images behind floated elements, you may want to use `clear`. See the references for "Understanding how Float Behaves" following this chart.
`cellpadding="3" vspace="3" hspace="3"`	`padding: 3px;`	With CSS, any element can have `padding`. Padding can be set uniformly or individually for the top, right, bottom and left of any element. Padding is transparent, so `background-color` or `background-image` will shine through.
align="center"	`text-align: center;` `margin-right: auto; margin-left: auto;`	`Text-align` only applies to text. Block elements such as paragraphs and divs can be centered using `margin-right: auto;` and `margin-left: auto;` This table, by way of example, is set for `width: 80%;` and is centered using `margin-left: 10%;` See the References below this chart for information on hacks and workarounds needed for centering.

An Unfortunate Necessity for Hacks and Workarounds

Block elements sometimes need to be centered using the horizontal centering hack. For precisely measured designs, you may need to use the box model hack. Both hacks, as well as a few other tips, are described in Integrated Web Design: Strategies for Long-Term CSS Hack Management by Molly Holzschlag.

Another source of information about CSS hacks and workarounds is Big John and Holly Bergevin's Position is Everything.

Understanding how Float Behaves

Eric Meyer's Containing Floats will help you grasp the fine points of floating elements.

Floated elements sometimes require clear. Read How To Clear Floats Without Structural Markup at Position is Everything for help.

More Help

A CSS Discussion list exists and is a wonderful source of help. The group has a Wiki with a wealth of information gleaned from their discussions. Among other things, there are pages in the Wiki that summarize CSS Layouts (css-discuss.incutio.com/?page=CssLayouts), CSS Hacks (css-discuss.incutio.com/?page=CssHack) and much more.

Virginia DeBolt is owner of the Web Teacher blog and author of the book Integrated HTML and CSS: A Smarter, Faster Way to Learn.