A major problem with a lot of the junk, bloated markup these days is the overuse of the <div> and <span> tags. Judious use of these helpful tags is required, if you want to really harness the beauty of CSS. Wrapping every line of markup in a <div> or <span> is practically the same as wrapping a <table> within a <table> within a <table>. That’s what we’re trying to move away from, right?

A random example

I had no intention of ragging this companies product. I’ve never used it. Their website is just 1 of hundreds of thousands that perpetuate the bloat of overused <div> and <span> tags. Moreover, this company proclaims their product ‘generates XHTML 1.1 compatible output’. So, you’d think they would practice what they preach.

Put up or shut up

First off, their site doesn’t validate. The home page triggers 14 errors at the W3C validator. In fact, there is no doctype even declared in the markup. but, that is just being petty though, right?

The real meat of this example is the use of the following CSS file and HTML markup:

CSS


.h2 { color: #114477; font: bold 12px Verdana; text-decoration: none;}
.help { color: #d7741d; font: 10px /16px Verdana;}
.justify { text-align: justify; margin: 0; padding: 0;}
.text { color: #000000; font: 12px Verdana; text-align: justify; text-decoration: none;}
a:link, a:visited { color: #000000; text-decoration: none; font-weight: none;}
a:hover { color: #000000; text-decoration: underline; font-weight: none;}

HTML


<div style="margin-top:5;margin-bottom:5">
<span class="h2">25 Jan 2006</span>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr valign="top">
<td width="10" align="left" valign="top">
<span class="help"><b>»</b>  </span></td>
<td align="left" valign="top">
<a href="/dhtml/"><b><span class="help">DHTML Menu Studio 4.0 released</span></b></a></td>
</tr>
</table>
<p class="justify">
<span class="text">DHTML Menu Studio 4 generates XHTML 1.1 compatible output code and comes with lots of new features, like an Adobe GoLive plugin, XML support, or an entirely new menu style (multi-level menu without popups).</span></p>
</div>

That’s quite a conglomeration of <table>, <div> & <span> tags with a large dose of inline CSS styling. Styling inline is no better than using <font> tags. With CSS you can stop putting your styles right in the HTML tag. Also, with this example, you see how many <div> & <span> tags are used? There everywhere! If your markup looks like this, you’ll never get away from tediuos file after file updates even to make a simple change like font-family, size, padding or margins. Another grand offense is styling the headline as: class=”h2″. They are missing out on search engine keyword importance rankings for the headline tag.

A better way

I’d be prone to style the above like this:

CSS


body { font: 12px Verdana, Arial, Helvetica, sans-serif; color:#000;}
.sidebar { width: 270px; margin: 50px 0 0 50px;}
.title { color: #d7741d; font-size: .8em; line-height: 1.25em; margin: 5px 0 5px 0;}
h2 { color: #114477; font-size: 12px; margin-bottom: 0;}
.content { text-align: justify; margin-top: 0;}
.sidebar a:link, .sidebar a:visited { color: #d7741d; text-decoration: none;}
.sidebar a:hover { text-decoration: underline; color: #000;}
.link { color: #d7741d;}

HTML


<div class="sidebar">
<h2>25 Jan 2006</h2>
<p class="title"><strong>»</strong>  <a href="/dhtml/"><span class="link">DHTML Menu Studio 4.0 released</span></a></p>
<p class="content">DHTML Menu Studio 4 generates XHTML 1.1 compatible output code and comes with lots of new features, like an Adobe GoLive plugin, XML support, or an entirely new menu style (multi-level menu without popups).</p>
</div>

The bottom line

Endeavor to make simple changes and take small steps in learning some best practices in writing XHTML markup.

• Don’t overuse the <div> & <span> tag
• Don’t use inline CSS styles when you could put them in your CSS file
• Take full advantage of your <hx> tags.
• Your pages will be lighter, faster and easier to manage

This entry was posted on Wednesday, April 19th, 2006 at 7:50 pm and is filed under Web Development, 30 Days of Web Standards, CSS. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.