What about the following:
<span class=bigHeader>My Online Article Title</span><p>
<span class=dateentry>May, 2007</span><p>
<span class=regulartext>Hey everybody, welcome to my article. Today
we’re going to be talking about:<p>
<span class=list>
Web standards-based markup<br>
Cascading Style Sheets<br>
XHTML</span><br><br>
Let’s get started!
<table class=”box”>
<tr><td>
<span class=”italics”>About the author:</span><br><br>
<a href=”http://navigationarts.com” class=authorHeader>Rob Cherny</a><br>
Lead Developer<br>
NavigationArts, LLC<br>
7901 Jones Branch Road<br>
McLean, VA, 22102 United States of America<br>
703.584.8920
</td></tr>
</table>
This code uses CSS and pulls content and presentation information apart. So what’s wrong with it and the first example? For starters, in both these examples, the code as it relates to the content is meaningless.
Even more so:
- The first example uses the <font>, <b>, and <i> presentation elements, all of
which are deprecated. - The second example features usage of <span> elements around all the content items, which does not convey that the information is a header, paragraph text, or list.
- With the <span> elements, the usage of the bigHeader class implies presentation information in its name.
- The <p> tags are being used at the end of each line and do not explain what a paragraph is in the document so much as demonstrate what its presentation attributes might do: create a double line break. The list class on the last <span> is just odd when there are perfectly good XHTML elements for lists: <ol> and <ul>.