Semantic markup
Semantic markup is simply a matter of using (x)html well:
- use the right tag for the right job;
- describe your content, and not the way it should be presented.
This is essential for effective use of the framework.
Example
You are about to write a new web page about chicken husbandry, and you figure that you should have a nice big title at the top of the page so that your users can right away see what the page is about. There are two ways to achieve this:
The presentation-first way:
<p style="font-size: 300%; color: green;"><strong>Raising your own chickens</strong></p>
The semantic way:
HTML: <h1>Raising your own chickens</h1>
CSS: h1 {color: green;}
In most contexts both examples will be pretty similar when rendered. However, there are many contexts in which users will experience them in very different ways. For example, a visually-impaired user who is accessing your page using a screenreader would be unaware that the presentation-first version is the title of the page, as would someone using a WAP browser with poor rendering capabilities.
Consider also those times when your HTML will be read by computers - search engines, for example, will often extract the headers from HTML to display them in search results.
When creating your markup, make sure that all the HTML bits mean something. Does it alter the meaning of the title to make it green? Well don't put that in the markup - save that for the presentational layer, CSS.
