Lesson Overview

This lesson focuses on the semantic elements we use for sectioning content of a web document. In other words, you'll learn about those elements that are used to create a document's structure such as header, footer, and navigation, as well as container elements like sections and articles.

As you read about the various elements, you'll probably find that these seem to lend themselves more to sites with articles or blog posts. In fact, these lesson tutorials do use a lot of these semantic elements. However, they're not limited to that kind of document. For example, if you were desinging a JavaScript game, you'd still use many of the elements in this tutorial for the different parts of the game screen!


It's important that you understand the syntax of HTML, and the minimal HTML code for valid web documents, the basics of HTML elements, and how to create valid HTML code.

Elements for Document Sectioning

The set of elements for creating document sections are often referred to as the HTML5 Semantic Elements. These elements were added to HTML (HTML5) in 2014. Document sectioning elements are elements that are used to divide page content into logical sections. For example, a <footer> element obviously contains the footer to a document, article, or entry; The <article> element contains some kind of article or post that can stand on its own. All of these elements are block elements.

Read about each of the following elements to learn more about how they're used:

Here's a CodePen that shows a page using many of the elements mentioned above. Note that the colours, fonts, and layout were actually done using CSS, which is a different course. You can learn CSS after you learn HTML, but for now just ignore the CSS tab.

See the Pen Example of Semantic Elements by Wendi Jollymore (@ProfWendi) on CodePen.

Here's another example:

See the Pen Semantic Example 2 by Wendi Jollymore (@ProfWendi) on CodePen.

Practice Quiz

Try this quiz to see how well you remember what you've been learning.

  1. Read the question and choose an answer.
  2. Click the Check Answer button to check your answer.
    • If the answer is wrong, you can try a different answer.
    • Answers you've already selected are highlighted.
  3. Once you find the correct answer, or if you just want to move on, click the Next button.
  4. After the last question, you can start the quiz over if you want.

The questions and answers are randomized, so that you are encouraged to use your critical thinking skills.


Create a web page about anything you like that contains the minimal HTML along with the following items:

  • A HEADER that contains the page title as a level-1 heading and sub-title as a level-2 heading.
  • A FOOTER that contains your copyright information. To display the copyright symbol, use the code &copy; for example:
    &copy; 2020 Sydney Greenstreet
  • A MAIN element between the HEADER and FOOTER that contains the following:
    • An ARTICLE that contains some paragraphs of text (you can just use filler text if you prefer, such as BlindText Generator). Make sure your article starts with a level-3 heading that contains an appropriate title of your choice.
    • A second ARTICLE like the previous one, with different content.
    • Inside one of your ARTICLEs, add an ASIDE with some text content.