From the author of

From the author of

Structural Healing

Developing in XHTML goes beyond converting uppercase to lowercase and adding
slashes to the end of <br> tags. If changing "tag
fashions" were all there was to it, nobody would bother. To benefit from
XHTML, you need to think about your markup in structural rather than
visual terms.

Marking Up Your Document for Sense Instead of Style

To the greatest extent possible, you want to use CSS for layout. In the world
of web standards, XHTML markup is not about presentation; it's about core
document structure. Well-structured documents make as much sense to a Palm Pilot
or screen reader user as they do to someone who's viewing your page in a
fancy-pants graphical desktop browser. Well-structured documents also make
visual sense in old desktop browsers that don't support CSS or in modern
browsers whose users have turned off CSS for one reason or another.

Not every site can currently abandon HTML table layouts. The W3C, inventors
of CSS, did not convert to CSS layout until December 2002. Moreover, even
die-hard standards purists might not always be able to entirely separate
structure from presentationat least not in XHTML 1. But that separation of
structure from presentation (of data from design) is an ideal toward which we
can make great strides and from which even hybrid, transitional layouts can
benefit. Here are some tips to help you start to think more structurally.

Color Within the Outlines

In grammar school, most of us were forced to write essays in a standard
outline format. Then we became designers, and, oh, how free we felt as we cast
off the dead weight of restrictive outlines and plunged boldly into unique
realms of personal expression. (Okay, so maybe our brochure and commerce sites
weren't that unique or personal. But at least we didn't have to worry
about outlines any more. Or did we?)

Actually, according to HTML, we should always have structured our
textual content in organized hierarchies (outlines). We couldn't do that
and deliver marketable layouts in the days before browsers supported CSS, but
today we can deliver good underlying document structure without paying a design
penalty.

When marking up text for the web or when converting existing text documents
into web pages, think in terms of traditional outlines:

Use Elements According to Their Meaning, Not Because of the Way They
"Look"

Some of us have gotten into the habit of marking text as an
<h1> when we merely want it to be large or as <li>
when we want to stick a bullet in front of it. We are all used to thinking that
<h1> means big, <li> means bullet, and
<blockquote> means, "indent this text." Most of us have
scribbled our share of HTML that uses structural elements to force
presentational effects.

Along the same lines, if a designer wants all headlines to be the same size,
she might set all her headlines as <h1>, even though doing so
makes no structural sense and is the kind of thing usability consultant Jakob
Nielsen would call a sin if he weren't too busy worrying about link
colors:

<h1>This is the primary headline, or would be if I had organized my textual
material in outline form.</h1>
<h1>This isn't the primary headline but I wanted it to be the same size as
the previous headline and I don't know how to use CSS.</h1>
<h1>This isn't a headline at all! But I really wanted all the text on this
page to be the same size because it's important to my creative vision.
If I knew about CSS, I could achieve my design without sacrificing document
structure.</h1>

We must put our toys aside and start using elements because of what they
mean, not because of the way they "look." In reality,
<h1> can look like anything you want it to. Via CSS,
<h1> can be small and Roman (normal weight), <p>
text can be huge and bold, <li> can have no bullet (or can use a
PNG, GIF, or JPEG image of a dog, cat, or the company logo), and so on.

From today on, we're going to use CSS to determine how these elements
look. We can even change the way they look according to where they appear on a
page or in a site. There is no longer a need, if there ever was, to use
<li> for any reason except the one for which it was created (to
indicate that the element is one in a list of several items).

CSS completely abstracts presentation from structure, allowing you to style
any element as you wish. In a CSS-capable browser, all six levels of headline
(h1h6) can be made to look identical if the designer so desires:

Why might you do this? You might do it to enforce a branded look and feel in
graphical browsers while preserving the document structure in text browsers,
wireless devices, and opt-in HTML mail newsletters.

Prefer Structural Elements to Meaningless Junk

Because we've forgottenor never knewthat HTML and XHTML
elements are intended to convey structural meaning, many of us have acquired the
habit of writing markup that contains no structure at all. For instance,
many HTML wranglers will insert a list into their page by using markup like
this:

item <br />
another item <br />
a third item <br />

Consider using an ordered or unordered list instead:

<ul>
<li>item</li>
<li>another item</li>
<li>a third item</li>
</ul>

"But <li> gives me a bullet, and I don't want a
bullet!" you might say. CSS makes no assumptions about the way elements are
supposed to look. It waits for you to tell it how you want them to look. Turning
off bullets is the least of what CSS can do. It can make a list look like
ordinary text in a paragraphor like a graphical navigation bar, complete
with rollover effects.

So use list elements to mark up lists. Similarly, prefer
<strong> to <b>, <em> to
<i>, and so on. By default, most desktop browsers will display
<strong> as <b> and <em> as
<i>, creating the visual effect you seek without undermining your
document's structure. Although CSS makes no assumption about the display of
any element, browsers make lots of assumptions, and we've never encountered
a browser that displayed <strong> as anything other than bold
(unless instructed to display it some other way by a designer's creative
CSS). If you're worried that some strange browser won't display your
<strong> as bold, you can write a CSS rule like this one:

strong {
font-weight: bold;
font-style: normal;
}

Using structural markup such as <strong> also protects people
using text browsers and other alternative devices from downloading markup that
is meaningless in their browsing environment. (What does <b> mean
to a Braille reader?) Besides, presentation-oriented elements like
<b> and <i> are likely to go the way of the Dodo
bird in future versions of XHTML. Play it safe by using structural elements
instead.