Why use semantic HTML?

Semantic content is part of the predicted future of the web. The general concept is that data and information should be able to exist interdependently of the design and layout. This boosts the portability of your content and also allows for the subject matter to easily displayed on different media and appear within more different designs and layouts then you could shake a really big stick at.

Rough Guide

Just think meaning. Forget about aesthetics and concentrate on a document structure.

For Example:

Company Name

Page Header

• Navigation One


• Navigation Two


• Navigation Three


• Navigation Four


• Navigation Five

Subheader

Text here and here and here and here.

<h1>Company Name</h1>
<h2>Page Header</h2>
<ul>
<li>Navigation One</li>
<li>Navigation Two</li>
<li>Navigation Three</li>
<li>Navigation Four</li>
<li>Navigation Five</li>
</ul>
<h3>Subheader</h3>
<p>Text here and here and here <em>and</em> here.</P>

Just think of a newspaper layout when using >h> tags, whats important, sums up a section and what should the hierarchy be. Anything that should be a group of elements (navigation, bullet points, lists) should be list. Use tags to apply meaning where necessary and avoid using their formatting equivalents.

This example is very basic, unless you only have one page you would also usually start to apply ID's or classes to the tags. Excessive use of <div> tags can be cut down on by effectively styling tags. Just be aware some tags have default margins and padding unless you chooses to zero out all the values (the pros and cons of this are debatable).


The Benefits

Aside from what was previously mentioned this also makes content accessible, easily readable by search engines and makes updating and redesigning a hell of a lot easier.



More info on writing semantic HTML

en.wikipedia.org