Semantic elements: it's all in the meaning

This is the fourth guest post by Mat Diss who is founder of bemoko, a British mobile Internet software company that aims to pioneer new ways for web designers to quickly construct better websites that can be delivered across all platforms from desktop to mobile.

Here Mat continues his series of posts that demonstrate the advantages of designing with HTML5. In this blog, demonstrates the significance of the latest semantic elements…


There is also another significant evolution in HTML that is improving the foundations upon which sites are created on. This is the inclusion of some new semantic elements, which more effectively describe the content of the page. The page at uses these new elements such as <header>, <footer>, <nav> and <article>.

The designers of the HTML5 specification have identified a handful of elements, which most pages use. By standardising this, a site developer can describe the page in a common way.

This makes the site easier to maintain (other site developers can clearly identify specific parts of the page) and easier for other systems to interact with, for example text to voice representation for visual impaired or extraction of article for repurposing the content in another platform (e.g. mobile app).

Previously a site developer might have simply used a with appropriate classes set – however the class name would be an arbitrary choice so use by other services would not be possible in a standard way.