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 are marking 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 being 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 markup -->

<h1>I am a top level page heading</h1>

<p>This is a paragraph which contains a word with <strong>strong</strong> significance</p>

<!-- Non semantic markup -->

<div>I am a top level page heading</div>

<div>This is a paragraph which contains a word with <span>strong</span> significance</div>

Hopefully, you should now understand the differences between semantic and non-semantic markup. Now that we have some knowledge of the most commonly used HTML elements used for content, we can turn to the more fun part of styling.