Designing with Structural Thinking

In the old days, 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 web standards compliant and accessible 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 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 a semantic 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.

1. heading with logo and site name
2. main page content
3. global site navigation
4. subsection navigation
5. search form
6. utility area with shopping cart and check out
7. footer with legal stuff

The generic element used to provide structural context to a page of HTML is the div element. (That’s assuming you aren’t experimenting with HTML5, which has elements fitting many of these structures built in.) 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 the 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, forms, lists, and so on.

By thinking first in terms of 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.

This information was rewritten from an earlier much longer article published at the Wise-Women.org site called The Early Bird Catches the CSS: Planning Structural HTML.