Writing semantic markup

You will hear the word “semantic” used often when you read or hear about HTML. The core concept behind semantic markup is to ensure that you use the most meaningful HTML element available to describe the content you mark up. For example, it would be possible for you to wrap the top-level page heading in a div tag; however, the h1 tag conveys the meaning that the content represents – that is, heading level 1. The HTML you write needs to be understandable to both humans and machines and by using the most meaningful element for each piece of content, you improve the meaning of both.

Ensuring that the HTML you write is as semantic as possible also has additional important benefits. The first is that it will make your web pages more easily searchable by search engines. You will also be helping out users who view your websites using a screen reader.

The following code shows some examples of semantic and non-semantic markup:

<!-- Semantic...