XHTML: Use Structural Markup

Ah, the wonders of web standards The oft-cited separation, the lifting of your spirit knowing that you're helping the semantic web evolve. The sheer joy of CSS. Adopting purely structural markup for your XHTML ensures a longer shelf life and faster pages. Written properly, structural markup can eliminate unnecessary classes by targeting content with CSS selectors.

Faking Structure

In an effort to control appearance, some sites and older WYSIWYG editors contort meaningless <FONT> or <SPAN> or <DIV> tags to fake structure. Here's an example:

<span class="bigfontheader">Structure-Free Headline</span>

Or you may see this:

<font size="1" color="red">Insert Large Headline Here</font>

When headlines are better done as, you guessed it, headlines:

h1{font-size:1.5em;margin:...;padding:...;}
...
<h1>Insert Meaningful Headline Here</h1>

So far this is pretty basic stuff. But what about headlines and decks, that typically describe news stories? One old way of doing headlines would be this conglomeration:

<font class="bigtext" color="#336699">Story One Headline</font><br>
<font class="normaltext"><a href="/storyurlhere.html"
Story one deck goes here, concise and compelling.</a></font>
<br><br>

<font class="bigtext" color="#336699">Story Two Headline</font><br>
<font class="normaltext"><a href="/storyurlhere.html"
Story two deck goes here, also concise and compelling.</a></font>

The problem with this approach is that there is no structure. On subsequent stories, you must duplicate your styles, making the code fatter and styles more difficult to modify. A better approach is to find the XHTML structure that most closely matches the content you want to display. In this case we can use a styled descriptive list.

.main dl dt{font-size:1.2em;}
.main dl dd{text-indent:0;}
...
<div class="main">
<dl>
<dt>Story One Headline</dt>
<dd>Story one deck goes here, much cleaner code.</dd>
<dt>Story Two Headline</dt>
<dd>Story two deck goes here, no replication of style.</dd>
</dl>
</div>

Note the use of descendant or contextual selectors here. By embedding your content within classed containers, and using compound CSS selectors to target your content you can save space and clean up your code.

Further Reading

CSS: Use Descendant Selectors

Descendant selectors target content within specific areas by using the parent child relationship of elements contained within other XHTML elements. This technique reduces the need to embed classes within elements.

By website optimization on 4 Apr 2004 AM