Concept: Semantic Markup

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.


<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> semantically more correct than using DIV tags or even just A tags in a paragraph, like this:

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

Semantically relevant code also allows screen readers and other machine based clients to better understand the meaning of the content in your markup. Hopefully that clears up the idea.