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.

Web designers being shot for not using semantic markup 1940's style comic cartoon

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.

Semantic extractor output - generic metadata and related resources

Abbreviations and acronyms.

Semantic extractor output - abbreviations and acronyms

Outline of the document.

Semantic extractor output - 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:

Leave a Comment

You must be logged in to post a comment.