Semantic Markup
In the Design and content guidelines sub-section of Google’s Webmaster Guidelines there is a paragraph that reads “…. write pages that clearly and accurately describe your content”. The only way I know of achieving this objective easily is to use semantic markup. (I will give some further reading references on semantic markup at the end of this post).
Semantic markup means using html elements that are appropriate to ‘content meaning’ rather than ‘content presentation’. A simple example might be using <em> for emphasis in some cases rather than <i> for italic because <i> only tells the browser what to do and does not explain what the content represents.
Apart from helping Google
there are other advantages in separating content from presentation and using semantic markup. For example much easier code maintenance and correct interpretation by other user agents like audio screen reader software.
However semantic markup is not a technical necessity and this is probably the reason why only a tiny minority of web designers even know what it is let alone use it when coding web pages.
From my perspective as a SEO whenever I have to make site wide changes where non-semantic markup (presentational markup) has been used I curse the web designer
For example if I want to change list items to uppercase and the designer has coded them as <p> - list item one</br> - list item two </br> - list item three</p> then I have to make the changes on every page. If they had used <ul> <li>list item one</li> <li>list item two</li> <li>list item three</li> </ul> then I can do the same thing with one line of CSS .ul {text-transform: uppercase ;} and not have to touch any of the markup.
I also want to shoot the designer whenever I see a missed opportunity to take advantage of Google’s recommendation to describe content, simply because the designer fails to use the appropriate semantic html.

If your web designer has provided a W3C validated site you might like to try their Semantic Extractor tool, which provides a basic outline of some of the semantics in your html markup. It simply examines your markup and provides a summary of important data i.e. generic metadata, related resources, defined terms, abbreviations and acronyms and an outline of the document. Prior to this post I parsed the home page of this site and this was the output:
Generic metadata and related resources.

Abbreviations and acronyms.

Outline of the document.

So what’s the bottom line? If you believe that Google uses (or will use in the near future) any form of semantic analysis of web pages then before you write the copy for your new web pages ensure that your designer uses semantic markup.
Further reading on semantic markup:
- Markup Guide by Dave Shea
- Shirley Kaiser’s Semantics, HTML, XHTML, and Structure
- SimpleQuiz from Dan Cederholm is not a quiz at all but a series of markup debates by top web designers that will make your head spin!
- Chris Pearson’s The Definitive Guide to Semantic Web Markup for Blogs
- Plain Old Semantic HTML (POSH wiki)
- John Allsopp surveys the issue of semantics in current web design and development











