Delving into Semantics

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

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

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 our 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 (e.g., <i> and <b>) elements vs. the semantic (e.g., <em> and <strong>) tags.

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