Chapter 17 | The
aside sectioning elements
Today we are going to look at the
footer elements skirting 💃 around the
main element which we will get to soon.
The official HTML documentation states that the
aside element is to be used as a container for content that is tangentially related to the content around it. I have always found that a little hard to interpret 😁 For me, this means that the contents of an
aside element, while related, should not detract from the main content of the page if it is removed. From this perspective it almost progressively enhances the main content. For example, in chapter 16 I showed how one can markup a table of contents navigational aid using the
On a blog, it is also common to offer another navigational aid through tagging. We might want to group the table of contents and the tag navigation but, not as a single
nav element. This is then a perfect grouping or sectioning use case for the
Live Codepen -
aside element usage example
The implicit ARIA role of
complementary for the
aside element provides a further hint to its use, and in fact with this in mind, another great example of the appropriate use of the
aside element can be found on Wikipedia pages. On the page about Switzerland, there is a sidebar common across Wikipedia that provides complementary information about Switzerland. The page would still be detailed and informative without this but, this enhances the usefulness of the content. To my mind, that would then be a perfect use case and a concrete example demonstrating the phrase, “content that is tangentially related”. Other example use cases can be to embed a feed from Twitter or Instagram or markup a pull quote.
All of this can be achieved using the neutral
div element and in some cases it can be appropriate. The reason we use these semantic elements is to expose an overall structure of our document that aid in content indexing as well as navigating around a page by assistive technologies. As with all things, we should be careful not to overuse any of these elements. As overuse will in the end render their utility less effective or even useless.
Upon first inspection, it would seem that this is a cut-and-dry element. It is used for the footer of a webpage, right? Correct, but… 🙃
footer element can actually be used within many of the other sectioning elements we have discussed so far. For example, a
nav element can have a
aside element can also have its own
footer, and technically, the
footer element does not even have to be the last element of its parent element. Although uncommon, the following is completely valid:
When the nearest ancestor of the
footer element is the
body element, the footer is seen as containing information regarding the entire page.
Live Codepen -
footer element usage example
There is also one more important difference here. When the footer is used in this way, it has the implicit ARIA role of
contentinfo which in-turn relates this information to assistive technologies. It is therefore important to be aware of this distinction.
Live Codepen - Complete example
That is where we will end it for this chapter. In the next chapter we will look at the
section elements as well as the various heading levels. Until then, keep making the web awesome! 🐨
- No related reading for this chapter. Have a 🍪