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.

However, in this scenario, the elements do not tell us anything about the meaning of this content. Contrast this with the newer HTML5 standard, where the <em> element can be used to place emphasis on content, while the <strong> element can be used to place strong emphasis on content.

Take careful note as to how the HTML5 elements do not inherently indicate anything about the font style associated with the text. With HTML5, there is a clear separation of concerns between content meaning and the content’s stylization. Focusing on using HTML to semantically structure your web content provides several benefits, including:

• Making your web content vastly more accessible to readers with disabilities.
• Applying styles with CSS will become more consistent and predictable.
• Search engines will use the semantic information to better understand your web pages.

Structural semantic elements

div elements can be used to separate content into different sections. However, div elements do not provide any inherent semantic meaning and are used most often as generic containers for styling content. With HTML5, several structural elements were introduced to separate content into more semantically appropriate containers.

<hgroup>

<hgroup> elements can be used to group heading elements that are semantically part of the same heading.

<header>

The <header> element can be used to represent content that is similar to the main header in a text document.

Many web page <header> elements contain logos and large headings identifying the site. Generally, the <header> remains consistent across pages (if your site contains multiple pages). <header> elements often also contain navigational elements that direct users to different parts of your web page.

<nav>

<nav> elements should be used to house components of your web page that are used to navigate to different parts of your web page.

A <nav> element is often found inside a <header> element. It is not necessary to follow this convention if you wish to place your navigation elements elsewhere on the web page.

<footer>

The <footer> element, as its name suggests, is used to house content that would be considered to be the footer of your page.

A footer can store things like the website’s author, copyright information, or even navigational elements to other pages on your website.

<article>

<article> elements should be used to house individual pieces of content that are unique to an individual page. A blog entry, a news/scholarly article, and a forum post are all good examples of content that would be semantically appropriate to store in an <article> element.

<article> elements should have a heading to indicate what the article's content is about.

<section>

<section> elements represent thematic groupings of content on your web page. For example, if your web page housed the contents of a book, <section> elements could be used for the book’s chapters.

<section> elements should also have a heading element to indicate what the section’s contents are about.

In general, <section> elements should be used when you need to place your content into semantic groupings that don’t fit the description of any other semantic element.

<section> elements can also be used to break up content in an <article> element into semantically discrete components.

<time>

Use the <time> element to provide a machine-readable timestamp for parts of your content that indicate a specific time or date. The <time> element has a datetime attribute that takes as input the date/time in a variety of formats, which you can learn more about here.

<time> should be used for things like the time of an event or the date a blog post is published to a website. <time> elements are not rendered any differently than regular text, but it provides a way to semantically indicate to a computer what content is to be considered a time or date.

<aside>

<aside> elements are generally used to house information that is not part of your main content, but is in some way related to it.

<aside> elements could be used for things like supporting information in an article, or a sidebar with navigational elements.

Exercise

Use semantic elements to provide structure to the HTML page below. Some things to consider:

• If there are multiple heading elements associated with a single heading, use <hgroup>.
• The unordered list with anchor elements is for navigational purposes.
• The site’s main heading and navigational elements should be stored in a <header> element.
• There should be an <article> and a <footer>.
• The <article> contains several sections describing the different semantic elements.

There is CSS that will change the appearance of the page if you use the correct semantic elements. You can also use the exercise’s tests to guide your element usage.