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!

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 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:

<article> - to contain an article (news, blog, tutorial, etc.) or other content that can stand on its own in its own page/document. For example, a blog might have a list of the most recent postings on the main page, and each post would be enclosed inside its own <article> element because each post can stand alone on its own page without losing any meaning or importance.
<address> - to contain contact information such as name, email, address, phone number, or any combination of those things. For example, if a <footer> element contains the copyright information with the author's name and email, the name and email should be contained within the <address> elemement.
<header> - the document header, but can also be used for an article/section header
<footer>- the document footer, but can also be used for an article/section footer
<nav> - to contain a block of navigation. This can be page navigation, or site navigation. A document could have multiple navigation elements for different kinds of navigation (for example, each tutorial/article in this page has navigation to the other sections in the tutorial, but there is also a <nav> element at the top of the page for navigation to my main page and other courses). It's not necessary to put all links inside a <nav> element, only when you have a clear block of navigation.

Accessibility

WCAG Technique H97 shows you how to use the <nav> element to contain a group of related links. This technique is used to achieve Success Criteria 1.3.1: Info and Relationships (also discussed below). Using this technique allows users to easily navigate to blocks of navigation or even skip over repetitive blocks of navigation if they want to. For example, visual users notice the same navigation menu in the header on every page of a web site, and can easily ignore it and skip to the main content. Screen reader users or users that can only use keyboard navigation can't do this. Using a <nav> element for this kind of repetitive navigation is one way to make it easy for a user to skip over the navigation and reach the main content quickly.
<section> - a generic section of content, used where the <article> element isn't appropriate. For example, a web page could have sections for the "About this Application" information, a section for the latest news, and a section for contact information. Sections could also be used inside articles: for example this page could be one <article> element with a section for the overview and a section for the element descriptions.
<aside> - used for a "sidebar" or "complementary content", which is a bit of content that's related to the content around it but could still be considered separate. You've probably seen these in magazine articles. For example, if you're reading an article about current trends in web design, there might be a sidebar with a paragraph about an interesting design decision the author made or experienced. Or an article might have a relevant quote displayed in an <aside> element. Sometimes an <aside> can even contain a <nav> block.
<h1> to <h6> - level headings where <h1> is the highest level and <h6> is the lowest level. These elements are used for titles and headings of documents and a document's sections and sub sections. They should be used in a hierarchical matter, similar to the headings and sub-headings used in any written document (such as an article or essay). For example, the main sections of a document use level-1 headings. The sub-sections must use level-2 headings. If the sub-sections have their own sub-sections, you must use level-3 headings for the sub-sub-sections. Additionally, all <article> and <section> elements are required to start with a level-N heading.

Accessibility

WCAG Technique H42: Using h1-h6 to identify headings shows you how to use the level-N headings to provide meaning to the actual titles or headings of content. Assistive technologies such as screen readers recognize the h1-h6 heading elements and will read them out to the user as a heading for the upcoming content. Headings can also be navigated to via assisstive technologies, which aids users that rely on keyboard navigation or pointing devices.

This technique also demonstrates the proper, hierarchical use of level-N headings in a document with examples.

Additionally, Success Criteria 2.4.6: Headings and Labels states that headings need to be clear and descriptive, because it helps users find what they're looking for in the document more quickly and easily, and it helps them understand the relationships between the various parts of the content. Note that it says, This Success Criterion does not require headings or labels. This Success Criterion requires that if headings or labels are provided, they be descriptive.

Technique G130: Providing descriptive headings explains how to choose appropriate heading text.

Don't confuse the level-N headings with the <header> element: The <header> element contains all the content of your document's header, which might include some level-N headings for the page title, sub-title or sub-heading, and navigation. For example, the header element of this page contains a <h1> element with the course title and then a <h2> element with the page title, and then the search bar and lastly a <nav> element that points to my main page and this course's main page. Level headings must be used in a hierarchical manner:
See the Pen Proper use of Level-N Headings by Wendi Jollymore (@ProfWendi) on CodePen.

Note that the level-N heading elements always go in ascending order: <h1> is the "highest" (most important) level heading and <h6> is the "lowest" (least important).

Accessibility

WCAG Success Criteria 1.3.1: Info and Relationships states that certain visual cues that convey the relationships and purpose of document sections should also be presented to users with a screen reader or when they choose to use a different stylesheet (e.g. to change colours and layout). In other words, if your document has a header area, a couple of articles, and then a footer area, a visual user can see this: usually the header is at the top of the document and the footer is at the bottom of the document, and the articles would be sequentially presented in between the header and footer. Additionally, there might be visual styling applied to these elements such as background colours and borders. Users who are unable to perceive these visual cues will not understand how the various sections of the document are used or related: they may not perceive where the header or footer is, they may not perceive which content is part of the header and which content is part of an article.

The use of semantic elements like <header>, <article>, <strong>, <nav>, and <h1> to <h6> are covered by the following techniques:

H101: Using semantic HTML elements to identify regions of a page - regions are structural areas of a web document that a user can navigate to quickly using assistive technology (e.g. a screen reader allows the user to jump between page regions with shortcut keys). Regions are one of several types of landmarks within a page (other landmarks are links, buttons, and form input fields - these are all places a user can navigate to using the keyboard).
G115: Using semantic elements to mark up structure - your browser and related assistive technologies use semantic elements to convey document structure, meaning of content, and the relationships of the various parts of the content to users. For example, <em> conveys that there should be emphasis on the element's content, <header> conveys that the content is the document's header (page title, sub title, perhaps navigation, etc), headings such as <h3> convey the title of the content in the parent element, and <aside> conveys that the content is related to the content in the element's parent, but not part of that parent's content (i.e. "complementary" content).
H49: Using semantic markup to mark emphasized or special text - how to use text semantic elements such as <strong> to convey that text is important or <em> to convey that text requires emphasis. See HTML - Basic Elements - Bold and Italics, and we'll cover more on a future lesson.
H42 is about level-headings and was discussed earlier.
H97 is about grouping related links into <nav> elements, which was discussed earlier.

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.

Read the question and choose an answer.
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.
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.

Exercise

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 © 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.