Semantic HTML: markup with a meaning

It's one of those new buzzwords of the web, semantic HTML, it's also one of the few buzzwords I actually believe in. Semantic HTML has a few objectives, the most important being to separate style and content.

Using Cascading Style Sheets, a web designer can easily apply layout to a well structured document, without having to add any presentational tags to the HTML. This allows users with alternate browser, as well as search engines, to download your pages with more ease.

There's an added benefit: search engines use the semantics of HTML to decide what a page is about. My experience as an SEO, a Search Engine Optimizer, has the added benefit that I can write just the kind of semantic HTML search engines like.

So what does Semantic HTML look like?

Most importantly: it's quite clean, I try to create nice looking pages with the least amount of markup nescessary. Secondly, it uses the proper headings for different parts of the page, a pagetitle will be wrapped in an <h1> tag, a subtitle in an <h2> tag, a paragraph in a <p> tag.

There's more to it than that though, the most well known examples of semantic HTML are probably the microformats. These allow a web designer to embed some meta data into (X)HTML by using classes and attributes. By doing that, the content on that page may be used in other ways as well. For example: your contact data might be marked up as a so called hCard, allowing for instant exporting into the user's contact database through a plugin.

Want to know more?

If you want me to build a new site for you with nice Semantic HTML, or you want me to have a look at your current site, contact me!