Accessibility Essentials #1: Structuring our webpage using HTML5 semantic sectioning elements.
Tags: html, webdev, frontend, a11y
Published: 2021-06-10 13:58:03

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

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

```html
<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):
```html
<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:

```html
<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__.

```html
<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.

```html
<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. 

```html
<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.

```html
<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](https://instagram.com/underscorecode) and [Twitter](https://twitter.com/underscorecode) for more related content.