When designing your web page, the first step is to define its regions. These are helpful for assistive technology users. They enable people to understand the overall structure of the content and move from section to section quickly.
Using semantic HTML, in addition to ARIA attributes, you will indicate the regions that are dedicated to navigation, main content, and elements like the search bar, header, and footer.
In this chapter, we'll focus on laying the groundwork using semantic HTML.
What does semantic mean?
By contrast, neutral tags like div or span don't convey information about the content's role.
Define the Regions of Your Page With HTML5 Tags
Using the right HTML5 tags to structure your page makes it easier to understand and read using assistive technologies, creating a better user experience. The assistive technologies won't be able to translate the site well if the tags are improperly used or absent.
With the help of HTML5, you can natively give meaning to regions on your page.
Define a Header Region Using the Header Tag
The header tag may contain the logo, a search bar, and a navigation menu.
It can also be used inside an article or section tag. In this case, the header is only associated with the section and not with the entire page.
Define a Navigation Region Using the Nav Tag
The nav tag, contains the links that navigate to other pages. The example below is a navigation menu adapted from the Bootstrap 4.4 documentation:
<!-- Navigation menu -->
<nav class="collapse bd-links" id="bd-docs-nav">
<div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.4/getting-started/introduction/">
Getting started
</a>
<ul class="nav bd-sidenav">
<li class="active bd-sidenav-active">
<a href="/docs/4.4/getting-started/introduction/">
Introduction
</a>
</li>
<li>
<a href="/docs/4.4/getting-started/download/">
Download
</a>
</li>
<li>
<a href="/docs/4.4/getting-started/contents/">
Contents
</a>
</li>
</ul>
</div>
</nav>Define the Main Content Region Using the Main Tag
The content of the main region changes from page to page (unlike your navigation menu). The main region usually starts with an h1 level heading that describes the overall topic of the page.
Define a Section Using the Section Tag
A section tag contains a single subject or functionality. It usually starts with a heading.
Define Standalone Content Using the Article Tag
The article tag is not limited to a newspaper, magazine, or blog article. It can contain any standalone content, such as a cooking recipe.
Define Complementary Content Using the Aside Tag
The aside tag contains content that is complementary to the main content.
Define a Footer Using the Footer Tag
The footer tag creates a concluding region for the entire page, or for a section or article.
As with navigation, if you have multiple footers on a page, you will have to add an aria-label to define how this region is different from the other footer tags on your page.
Let’s Recap!
A good approach to accessibility begins with the proper use of HTML5 tags.
Semantics in HTML is the use of meaningful tags.
Now that you know how to correctly create a basic web page structure, let's improve the structure's accessibility using ARIA roles and attributes. Then you'll what you've learned to our "Tonight in Gotham" project.
