HTML was created as a simple method of exchanging text based documents and NOT as a layout and design tool. The growing dominace of the web as a commercial tool for business has pushed graphic print designers into "corrupting" the semantic nature of HTML with "decorative and physical" in-line tags, thereby breaking the logical flow of meaning.
Semantic mark-up refers to a method of organising data and content into logical form and then styling its presentational appearance with a separate linked "element" or document. In short ... semantic mark-up is the process of separating content from styling.
The concepts of semantic mark-up can be applied to web design and other multimedia development technologies.
CSS is the w3.org standard for implementing semantic mark-up in web pages. A web page is created with logical order and marked-up with tags that have logical rather than physical meaning. The appearence of these tags is then defined in a linked CSS document. If the CSS document is detached from a content page, the page retains its semantic meaning and logical flow.
1 Accessibility. Because content retains a logical order and flow, it will make sense when read by a screen reader.
2 Platform independence. The same content can be styled differently for different devices ... such as mobile phones, computers and TVs.
3 Many content documents but only one style document. Multiple content documents can be styled by one style document element.
4 Ease of updating. The look of a complete project can be changed with ease by amending the "rules" (or styles) in the style sheet document element.
Old HTML (semantic / logical flow)
Decorative HTML (physical tags break semantic / logical flow)
XHTML example - (semantic mark-up)
XHTML example - WITH linked CSS (1) (semantic mark-up styled by a linked document)
XHTML example - WITH alternative CSS (2) (semantic mark-up styled by a linked document)
These examples were all built in a modular fashion in which content (code) was seperated from presentational style.