Accessibility Essentials #1: Structuring our webpage using HTML5 semantic sectioning elements.

With the arrival of HTML5, there were several new features coming on the scene, something that is always welcome, but that also brings associated a bit of confusion and an obvious process of adaptation to all that new stuff we want to learn about and include in our projects as soon as possible (leaving a little aside all that we already know beforehand).

One of these new features was the introduction of semantic elements for sectioning the document, which help us developers keep the structure of our webpages well organized. But, beyond that, these elements were specifically designed to inform the browser they're running on and other technologies used for HTML interpretation (like screen readers and voice assistants) about their structural function inside the document.

Before HTML5 appeared, the only suitable element for keeping documents organized and provide them with a decent structure was <div>, which is very generic and doesn't convey any extra information to browsers or tools that interpret the documents. So, due to the fast-growing technology world and, with the appearance of new ways to access information, having only one acceptable way for such purpose, which wasn't even covering the actual necessities at all, fell really short.

Consequently, it was imminent that something like semantic sectioning elements would appear to alleviate those required needs.

Semantic elements vs. presentational elements

HTML has always had semantic elements, but they were created with a different purpose, not exactly structuring. But this isn't the only kind of elements HTML comprises: it also provides presentational elements.

Let's see what's the difference between them.

Semantic elements: Those HTML elements which contain extra information about their purpose or role inside the document and the type of content expected inside of them.

Examples of HTML semantic elements:

<form>: Form element.
<table>: Table element.
<h1>: Big heading element.
<ul>: Unordered list element.
<li>: List item element.

Presentational elements (or non-semantic): Those HTML elements which only affect presentation, but not semantics. They don't provide any extra information about their role and are mainly used for just styling the document.

Examples of HTML presentational elements:

<div>: Div element. Used for defining a block of content.
<span>: Span element. Used for defining an inline container.

They tell nothing about their content.

HTML5 semantic elements for sectioning

As mentioned above, structuring a HTML document using just <div> elements wasn't an option anymore, so that's why semantic sectioning elements came to stay.

Why is important to use semantic sectioning elements?

At this point, you may be wondering why you should change your way of writing your HTML if that method has always worked for you in the development process.

Well, even though there are a few very important reasons why you should change your way of getting things done with HTML and start using these semantic elements (for your own benefit), the main one and definitely the most important is that your webpage should be available for everybody.

Many accessibility tools, like screen readers and voice assistants rely on semantic elements to be able to interpret HTML appropriately for people who make use of them.

So, in short, the main benefit of using these elements is making your site accessible, which should be reason enough for you, but, in case you still can't see things clearly, let's take a look at the complete list of advantages these elements bring with them.

More reasons why you should start using semantic sectioning elements if you haven't already done so

1. Scalability: If your project starts growing in size (and it probably will), at some point, it can become difficult to maintain if you don't structure your files properly, so using semantic sectioning elements is a good way to keep your code clean, well-organized and make it maintainable.
2. In Computer Science, naming everything as the role they perform or the function they accomplish is always a good idea, and you should start doing it from now on if you're not used to doing it. It will save you tons of time and will get you rid of possible future headaches 🙂
3. SEO positioning: Search engines can make sense of semantic elements and they consider their content as important. So using non-semantic elements for structuring your webpage may result in poorly performance in terms of SEO (definitely something you won't be happy with).
4. Element targeting purposes: By using semantic elements, you're letting CSS and JS know that the elements they're referencing are relevant, so, therefore, they can effectively target them.
5. Your webpage will provide a better user experience to everybody.

A common bad practice

Let's now have a glance at a bad navigation structure that we can still find in some webpages to this day (although it's true that it's becoming less and less common every day).

<div id="nav">
  <div class="list">
    <div class="item">
      <a href="#">Item1</a>
    </div>
    <div class="item">
      <a href="#">Item2</a>
    </div>
    <div class="item">
      <a href="#">Item3</a>
    </div>
  </div>
</div>

Would this code do the trick for us in terms of styling and presentation? Absolutely yes.

In terms of appearance, this navigation structure could seem as good as any other: we could style those <div> elements as we'd like and, visually, the results would be as expected.

Would it be accurate for structural purposes and visual impaired users that use assistive technology to visit our webpage? Absolutely not.

These assistive technologies couldn't be able to identify that block element as a navigation section and it wouldn't be interpreted as such, not letting the user have a good experience, which will result in them leaving your site in all probability.

In addition to that, search engines wouldn't consider that content as important or relevant, since we're defining generic block elements as containers instead of indicating that our elements are supposed to define a navigation section consisting of a list with some items (even though we're using ids and classes. Search engines don't care about that.) So it's pretty obvious that our webpage won't be as well-positioned as if we'd be using semantic elements.

So, does this mean that I can't use non-semantic elements like <div> anymore?

Of course not. You can and actually should. But start thinking of them as elements that can come into play only when semantic elements don't fit your page necessities and you feel like they're not that useful or even necessary in that particular case.

So, summing up:

When to use semantic elements? Whenever possible.

When to use non-semantic elements? Only when you are not able to find a suitable semantic element for such purpose.

Now that we know why is important to change the way we define the structure of our documents, let's take a look at these (relatively) new elements and how we can include them in our code.

Sectioning content elements in HTML5

1. The navigation element: <nav>

The navigation element is intended to define a section of a page which contains navigation links.

This element is mostly used to define the main navigation of a webpage (which is likely going to be accessed from anywhere on the site), but it can be used as well to include a secondary navigation, which means you can have several navigation elements within your document.

Note that not every link on your webpage should be inside a navigation element. You should only use it for major navigation blocks.

An example of use:

<nav>
  <ul>
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Blog</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
  </ul>
</nav>

2. The article element: <article>

The article element represents an independent piece of content inside your document. It encloses a block of related content and makes sense by itself.

It could be used to define a blog entry, or a newspapers or magazine article, but also for any item of content that you consider independent.

A document can contain multiple articles inside and these can be structured into sections as well.

Note that each article element should be identified, ideally by adding a heading as a child.

An example of use:

<article>
  <h1>Article #1</h1>
  <p>This is an article</p>
</article>

3. The section element: <section>

The section element represents an independent section of a document. Similar to the article element (be careful not to confuse one with the other), the section element is basically used to group content that comprise the same functionality. Its usage is only recommended when there isn't a more specific element to represent it.

As well as the article element, the section element should also be identified, ideally with a heading.

Note that <article> elements can contain several <section> elements and <section> elements can contain several <article> elements, so it's key that you identify the necessities of your content (speaking in terms of structure) to come up with the best result for your purpose.

A complete example of use that includes several <section> and <article> elements (a little bit tedious but worth the understanding, merely didactical):

<section>
  <h1>Foods</h1>
  <section>
    <h1>Fruits</h1>
    <article>
      <h1>Strawberries</h1>
      <section>
        <h1>Color</h1>
        <p>Red</p>
      </section>
      <section>
        <h1>Taste</h1>
        <p>Sweet</p>
      </section>
    </article>
    <article>
      <h1>Oranges</h1>
      <section>
        <h1>Color</h1>
        <p>Orange</p>
      </section>
      <section>
        <h1>Taste</h1>
        <p>Sweet /sour</p>
      </section>
    </article>
  </section>
  <section>
    <h1>Vegetables</h1>
    <article>
      <h1>Carrots</h1>
      <section>
        <h1>Color</h1>
        <p>Orange and green</p>
      </section>
      <section>
        <h1>Taste</h1>
        <p>Fruity/bitter</p>
      </section>
    </article>
    <article>
      <h1>Broccoli</h1>
      <section>
        <h1>Color</h1>
        <p>Green</p>
      </section>
      <section>
        <h1>Taste</h1>
        <p>Herbaceous</p>
      </section>
    </article>
  </section>
</section>

4. The aside element: <aside>

The aside element represents the additional content that is not directly related to the main content of the page. They are typically used to define sidebars.

An example of use:

<aside>
  <section>
    <h1>Social</h1>
    ...
  </section>
  <section>
    <h1>Related posts</h1>
    ...
  </section>
  <section>
    <h1>Collaborators</h1>
    ...
  </section>
</aside>

Other semantic HTML elements used in sectioning

1. The body element: <body>

The body element constitutes all the content of the document and it belongs to a group of elements called sectioning root elements.

<body>
...
</body>

2. The main element: <main>

The main element is used to define the main content of the body element. It's not a sectioning element and there must not be more than one visible per document (if you feel like you need to include more, you must use the hidden attribute).

In addition, it's not recommended to use this element to identify main content sections or subsections within the document and you must never include it as a descendant of <nav>, <article>, <header>, <footer> or <aside> elements.

<body>
  <main>
  ...
  </main>
</body>

3. The header element: <header>

The header element represents every introductory content. This element belongs to the flow content category and can be used as many times as needed through a document to define headers for <body>, <section>, <article>, <aside>, and <nav> elements.

<body>
  <header>
  ...
  </header>
  <main>
    <article>
      <header>
        <h1>...</h1>
      </header>
      ...
    </article>
  </main>
</body>

4. The footer element: <footer>

The footer element represents a footer for its nearest sectioning content element or sectioning root element and contains extra information related to the main content of the page, such as links, copyright data, maps and so on. This element belongs to the flow content category as well as the header element.

<body>
...
  <header>
  ...
  </header>
  <main>
  ...
  </main>
  <footer>
  ...
  </footer> 
</body>

Conclusion

HTML5 semantic sectioning elements have come to stay due to all the advantages they provide us with in terms of structure, but mostly, for letting us developers make the web accessible for everybody.

Based on those facts, we can conclude that it's definitely worth taking your time to learn how to use these new sectioning elements and integrate them into your upcoming projects.

---

I hope that this article has been helpful for you and I'll see you all in the next.

---

🎉 Don't forget to follow me on Instagram and Twitter for more related content.