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.

Prerequisites

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:

• <main> - 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 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 lesson.
• <div> - 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.

  See the Pen Div Example 1 by Wendi Jollymore (@ProfWendi) on CodePen.

• <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.
• <pre> - 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.
• <ul>, <ol> and <li>, <dl>, <dt>, <dd> - these elements are used to define bulleted, numbered lists, and description lists. We'll learn all about lists in the lesson on Lists.
• <figure> and <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.
• <menu> - this element is used to create a toolbar of ordered menu items. The menu items are defined using <li> elements. In fact, the <menu> element is just a semantic version of the <ul> element you can use to create a list of menu items. The Accessibility Tree handles <menu> exactly as it handles a <ul>. The difference is how you use them: use <menu> for a menu of iteractive items (e.g. buttons, links), and use <ul> to present non-interactive items in the form of a bulleted list.

  See the Pen Untitled by Wendi Jollymore (@ProfWendi) on CodePen.