Base Creative Studio 226, Business Design Centre, London, N1 0QH . T. 020 7359 0005 . E.

Need to know basis


HTML Code in Web Development

Two of the biggest weapons in the web designer's arsenal are HTML and CSS. HTML is the language we use layout a web page, for a particular piece of content HTML defines what 'it' is, a paragraph, a heading, a list and so on. CSS describes how an element of a web page should look, so black, brown, large, small etc... The problem here is that neither of these describe what the content or means; what its semantic meaning is. This is a big issue for Search Engine Optimisation, if we can help search engines understand what our content is about then the website will be indexed more effectively and the traffic driven to the website will be of a higher quality (more qualified leads). Thankfully help is at hand in the form of microformats. These use an extension of the existing HTML / CSS specification (more on this later) to convey semantic meaning about sections of a website to search engines and other automated tools.

Lets start with an example of semantic meaning, this should also help to explain why this is a challenge to search engines. Below are two sentences:

52 Upper Street, Islington, London, N1 0QH.

To be or not to be, that is the question...

As human beings we recognise the first as an address and the second as a quote from Shakespeare. However, a search engine would see this as:

Number word word, word word, letter number number letter letter

Word word word word word word, word word word word...

Not overly helpful. Granted the search engine might use these as keywords on our site, but we would really like to highlight our address above our quote so people searching for our services in Islington find us above the competition. Here is another example:

The business is located on Upper Street, London.

The business provides excellent customer service.

The first is location information, the second is a review or opinion, both are relevent but both have extra weight in certain situations. The first sentence would be great in a business directory, the second on a review site. Again we have the problem of search engines not understanding the semantic meaning of our content.

We can use microformats to provide semantic hints to search engines, to tell them that this sentence is an address or that this one is a review. Here is a very basic (non working) example:

<number>52</number><street>upper street</street><town>Islington</town> etc...

Information such as road or street can be added to existing HTML elements by using the 'class' attribute, which already exists for CSS to function correctly. By providing additional information we can reinforce the meaning or importance of certain key phrases or paragraphs. By using an agreed syntax and working within the confines of the existing HTML / CSS specification these can appear to search engines but be hidden from your human users. This makes search engines more confident about the meaning of your website and so increases the chances of:

  • Appearing higher up in the rankings.
  • Search engines showing additional information about your site on the results page.

I can't think of any site that wouldn't want both of these.

An additional benefit of microformats is that they are easy to implement and can often be retro-fitted to existing sites with minimal fuss. It's a simple technique that I highly suggest looking at as a way of improving your natural search engines rankings.

More information can be found at http://www.microformats.org


Submit your Comments


blog comments powered by Disqus