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
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.
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:
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 . 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
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
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:
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.
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
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 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"
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.
background-color can apply to any element, not just
Any element can have a border, the colors of which can be set individually for top, right, bottom and left if desired.
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
When setting the spacing for tables, use the
If you want a single border line between adjacent table cells, use
Border can replace
hr when used only as
border-bottom on an element. A rule for
border-bottom can simulate a drop shadow.
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.
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-image will shine through.
Text-align only applies to text.
Block elements such as paragraphs and divs can be centered using
margin-right: auto; and
This table, by way of example, is set for
width: 80%; and is centered using
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.
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.
Copyright 2004, Virginia DeBolt, All Rights Reserved
Virginia DeBolt is owner of the Web Teacher blog and author of the book Integrated HTML and CSS: A Smarter, Faster Way to Learn.