Semantic HTML/XHTML? WTF!?

Semantic (X)HTML is a term that has banded about quite a bit, but is vague enough to really cause some confusion.

Semantic HTML/XHTML basically means using the standard (X)HTML tags as much as possible, and avoiding DIVing a page up too much just to apply some CSS.

<div class="pageHeader">
<div class="pageTitle">Welcome to My Website</div>
</div>
<div class="pageContent">
<p>This is my website - hope you like it very much.  Thank-you-please!</p>
</div>

Could be re-written as:

<h1 class="pageTitle pageHeader">Welcome to My Website</h1>
<p class="pageContent">This is my website - hope you like it very much.  Thank-you-please!</p>

As you can see, this markup is alot cleaner than the example shown previous. The first example has some unnecessary markup in that the title of the page is wrapped in 2 DIV tags, when simply using a normal H1 tag with some CSS applied will give us the same visual result, but in much cleaner markup.

The page will contain the same content as far as a user is concerned, but because the HTML tags used in the second example are more appropriate the benefit of improved accessibility, and to a further extent SEO, can become apparent.

Obviously because the same CSS classes are in place, the visual appearance of the two examples is exactly the same. Notice that the H1 element has 2 values against its class attribute - so both of these CSS classes are applied to this element. This might be something fundamental to many people, but I’ve got to admit having not learned this for a while after getting into CSS!