Designing with Web Standards: Structural Healing
- Structural Healing
- Visual Elements and Structure
- About This Article
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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:
<h1>My Topic</h1> <p>Introductory text</p> <h2>Subsidiary Point</h2> <p>Relevant text</p>
Avoid using deprecated HTML elements such as <font> tags or meaningless elements like <br /> to simulate a logical structure where none exists. For instance, don't do this:
<font size="7">My Topic</font><br /> Introductory text <br /><br /> <font size="6">Subsidiary Point</font><br /> Relevant text <br />
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:
h1, h2, h3, h4, h5, h6 {
font-family: georgia, palatino, "New Century Schoolbook", times, serif;
font-weight: normal;
font-size: 2em;
margin-top: 1em;
margin-bottom: 0;
}
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.