Why you should be using semantically correct HTML mark-up

Using correct HTML tags within your markup not only helps with SEO but also promotes web standards and for some gives us a warm fuzzy feeling in our stomach knowing things are the way they were meant to be.

But what exactly does semantically correct HTML mean? HTML is a markup language, and as with other languages, HTML tags and attributes can have a meaning (semantics) attached to them. Typically HTML elements can roughly be categorised into the following:

• Semantic elements (cite, code, em, p, strong etc.); have specific meaning attached to them
• Presentational elements (b, i, font, br etc.); do not have any meaning attached to them and only alter visual presentation

When using semantic markup your content can be read and interpreted by software. Why is this important? Humans can easily distinguish elements on a web page purely from their visual attributes, and it’s normally easy to identify a header or a paragraph on a web page. For software it’s not that easy, in order for content of a web page to be machine friendly it needs to be contained within the relevant semantic elements. E.g. p for paragraphs, ul for unordered lists, h1, h2 etc. for headings and so on.

Common Structural Semantic Elements

Benefits of semantic markup

• SEO benefits; semantic markup makes it easier for search engines to find and index the content on your pages and increases the chances of your site being ranked better for relevant topics.
• Accessibility; your website is more accessible; semantic markup .
• Flexibility; easier to change the layout with CSS, the markup is simpler and easier to handle.
• Maintenance; plain, structured code makes it easier to edit and make changes rather than searching through multiple nested tables.