Lesson Overview

In this lesson we'll go over most of the HTML elements used for grouping different types of content on the page. Almost all of these elements are covered in detail in upcoming lessons, and a couple are elements we already learned in previous lessons.


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 Grouping Content

This next set of elements we're going to look at are used to organize the content of the page. These elements contain actual content (e.g. text, figures, text). These grouping elements are block elements, and the element name helps define the type of content it contains. Where the document sectioning elements define specific areas or parts of the page/document and divides the page/document up into those different sections, the grouping elements define the different kinds of content that will be displayed inside the various document sections. For example, content that appears as figures, lists, quotes, or computer code are all contained within elements that define the group or type of content.

Many grouping elements are semantic, but several are also non-semantic elements: the names of the elements don't always tell us the content of the element. For example, <figure> is a semantic element (it contains an image, chart, or other item that helps with the rest of the content on the page), but the <div> and <p> elements have names that are a bit more ambiguous and don't really indicate the type of content they contain.

Here are some of the content grouping elements covered in these tutorials:

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.