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. 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: Or you may see this: When headlines are better done as, you guessed it, headlines: 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: 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. 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.Faking Structure
<span class="bigfontheader">Structure-Free Headline</span>
<font size="1" color="red">Insert Large Headline Here</font>
h1{font-size:1.5em;margin:...;padding:...;}
...
<h1>Insert Meaningful Headline Here</h1>
<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>
.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>
Further Reading
By website optimization on 4 Apr 2004 AM