The term semantic markup has become another of today’s buzzwords. People always talk about it, but few of them really understand the concept. The problem is unless you’re a philosopher, the idea of semantics is about as meaningful as metaphysics.

So lets try and clarify what semantic markup is and what significance it has to the web designer.

Semantics is the study of meaning. Semantic markup is markup that has meaning, the idea is tha the tags you choose add to the overall meaning of the content you are marking up. The earliest (and simplest) example of this is the argument between strong and b tags. Semantically the strong tag has meaning, it implie strong emphasis, and thus conveys added meaning. Whereas the b tag just implies bold, a purely visual characteristic.

A second example is the markup for the nav of your page. Semanticly it makes more sense to mark the navigation elements up inside a unordered list, because nav is in fact a list of items on the site.

So..

<ul class="nav">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
</ul>

..is semantically morencorrect than using DIV tags or even just A tags in a paragraph, like this:

<p>
    <a href="#">Item 1</a> |
    <a href="#">Item 2</a> |
    <a href="#">Item 3</a>
</p>

Semantics also allow screen readers and other machine based clients to better understand the meaning of the content in your markup.

Hopefully that clears up the idea.