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.
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,
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
Many grouping elements are semantic, but several are also
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
- a semantic element that contains the main portion of the
document/aritcle/section. The lesson on
document sectioning had some examples
that used the <main> element. Notes:
A document should only have one <main> element.
The <main> element should contain content that is unique to the
current document or page, and that content should be related to the
main function of the application or the main topic of the page.
Example: A game might have a header with navigation, a footer, and
a main area with the main game board and controls.
Example: these notes pages could have the actual tutorials wrapped
inside a <main> element, exluding the header, footer, and menus
that are common to all tutorial pages.
<p> - a
non-semantic element, referred to as the
"paragraph" element because generally it contains a paragraph of text.
Although, sometimes people use it as a container for other elements/content
when a block element is needed: you should actually use the <div> element
for that purpose and only use the <p> element for paragraphs.
We learned all about the <p> element in the HTML Basics
- a non-semantic element that is used as a generic
block element or container. It's often used when <article> or <section>
is not appropriate. In the example below, the <div> elements are used as
containers for the various parts of the Rock, Paper, Scissors game.
<blockquote> - a semantic element that contains a
quote as a block element. We'll learn more about <blockquote> in the lesson
on Quotes and Code.
- a semantic element used to display "pre-formatted"
text. When you display text in an HTML document, the browser ignores a lot of the
whitespace, so if you try to format your text with tabs and several spaces or several
new-lines, the browser won't display it the way you want: it interprets any single
or series of tabs/spaces/new-lines as a single space character. You can get around
this by using the <pre> element. We'll learn more about this element in the
lesson on Quotes and Code.
these elements are used to define bulleted,
numbered lists, and description lists. We'll learn all about lists
in the lesson on Lists.
<figcaption> - these elements define figures,
much like you might see in a textbook or large reference document
that contain diagrams, charts, and other images. In a web appliction or
web page, a figure can also contain code samples, interactive elements,
and lots of other things. We'll learn more about figures in the
lesson on Images and Figures.
Try this quiz to see how well you remember what you've
Read the question and choose an answer.
Click the Check Answer button to check
If the answer is wrong, you can try a different answer.
Answers you've already selected are highlighted.
Once you find the correct answer, or if you just want to move on,
click the Next button.
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.