Delving into Semantics

Overview

Let’s take a look at the definition of semantic, according to dictionary.com:

Semantic [si-man-tik]:
adjective

1. of, relating to, or arising from the different meanings of words or other symbols
2. of or relating to semantics

In this lesson, we will address the importance of considering semantics when structuring your HTML pages.

With the HTML5 standard, many elements were introduced that moved HTML from a presentation-centric markup to a more semantic-centric approach.

What exactly do we mean by this? Referring back to the definition, the goal of semantic HTML is to clearly indicate the meaning of each piece of your web page’s content.

Case study

A good illustration of the difference between presentational elements and semantic elements can be found in the differences between the style-centric HTML4 <i> and <b> elements vs. the semantic <em> and <strong> tags.

In the HTML4 world, the <i> element was used to italisize text, and the <b> element was used to bold text.