Define Your Page Structure Using Semantic HTML

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.

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.