If the Shoe Fits...

The great thing about using semantic markup is that there is probably an HTML element that does exactly what you want to do, and makes sense structurally. There is no reason to reinvent the wheel.

Headings

Headings can separate your document into logical areas. Heading elements are also read by search engine robots and are interperted as to the weight of a given section.

The Wrong Way

Take this bad example of presentational markup:

<div style="font-weight:bold; font-size:140%">My Heading</div>

Or:

<div class="heading">My Heading</div>

The Right Way

Now there's a perfectly good element for that, and it's called H1 through H6. So better would be:

<h1>My Heading</h1>

What about an image in the heading you ask? Still not a problem. Since H1 is a block level element, it can contain inline elements like img, or it can be styled to have a background image. Use H2 through H6 and subheadings, or to break the page apart, for example:

<h1>Pets for Children</h1>
<h2>Dogs</h2>
<p>Certain breeds of dog are a good choice for children.</p>
<h2>Cats</h2>
<p>Cats are patient with children, but only to a point.</p>

If you were creating an outline, this is what the outline would look like:

Pets for Children
- Dogs
- Cats

Navigation provides a means for the visitor to gain access to different parts of your website.

The Wrong Way

Here is a typical example of navigation:

<a href="index.html">Home</a> | <a href="shoefits.html">Shoe Fits...</a>

A screen reader would read this out as "Home" "Vertical Bar" "Shoe Fits". That sounds nasty and doesn't make any sense. Worse:

<a href="index.html">Home</a>
<br>
<a href="shoefits.html">Shoe Fits...</a>

A screen reader would read this as Homeshoefits, as one word. That sounds even nastier and is incomprehensible. It might be okay for Bart Simpson to do this to Moe the Bartender, but not for a web site.

Even worse:

<table>
<tr>
<td><a href="index.html">Home</a></td>
<td><a href="shoefits.html">Shoe Fits ...</a></td>
</tr>
</table>

How would a screen reader read this? "Table" "Cell Closed" "Cell Open" "Home" "Cell Closed" "Cell Open" "Shoe Fits". Tables are for tabular data, not for positioning of elements. Tables have been badly abused. Many authors nest tables, which

makes it difficult for browsers because they have to read the entire contents of the table(s) before the page is rendered.
makes load time slower because there is more markup
makes debugging difficult

The Right Way

Navigation is a list of links to documents in the web site, or documents outside of the web site, so what type of markup would you want to use? List markup, of course. Here's a good example:

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="shoefits.html">Shoe Fits...</a></li>
</ul>

The good thing about using list markup for navigation is you can use CSS to display it any way you want. There are some excellent examples of Taming Lists at AListApart.

Positioning

Let's take the page you are viewing as an example. This page has a menu and content. If you are using a modern browser, like Opera or Firefox you will notice that the menu at the left stays in place when the rest of the page moves. This page uses no frames or tables.

The Wrong Way - Frames

There are a lot of sites on the Internet that use this method of keeping a menu visible for the user. However, there are many drawbacks, such as printing problems, bookmarking, search engine orphan pages, etc. Search Google for Frames Are Evil for more reasons to avoid frames.

The Wrong Way - Tables

Often, viewing source on a lot of sites, you will see something like this:

<table>
<tr>
<td>
<table>
<tr>
<td><a href="index.html">Home</a></td>
</tr>
<tr>
<td><a href="shoefits.html">Shoe Fits ...</a></td>
</tr>
</table>
</td><td>
<p>This page has nothing whatsoever to do with shoes.<p>
</td>
</tr>
</table>