Table of Contents
HTML5 was a huge change when it comes to web development. It introduced brand new approach focusing now on semantic rather than just pure syntax. Even though it was a few months ago, many web designer and developers still struggle with new elements introduced in HTML5, predominantly sectioning and non-sectioning elements like article, header, main, section and footer. Today, we will focus on these elements, how to use them properly and pass the validation.
Semantic HTML5
As I mentioned in the beginning, HTML5 is focused on semantic and creating people-friendly websites. In fact, when working on HTML5, engineers scanned syntax of thousands of websites to find out what are the most often used classes by web developers and designers. From these statistical data they derived the names for the new elements – header, nav, main, section, article, aside and footer. This is a big advantage for, now content focused, search engines and crawlers.
HTML5 elements
In HTML5 are two groups of elements. First group are sectioning elements – nav, section, article and aside. You are going to use these elements only when starting new section in document outline. Additionally, each of these elements have a more specific purpose related to the semantic foundation of HTML5. Let’s talk about all of them individually.
Section
The section element is meant to enclose related content in the similar context. It can be seen as a substitute for div elements. However, this is not true at all. Div elements should be used to group and style related or non-related content, no matter if you are talking about HTML5 or HTML 4.1. That’s why it is common practice to wrap up the whole page in div element with class like “wrapper” or “container”. Also, if you are familiar with, say, Bootstrap, you know they use div elements with classes “row” and “container” to style layout.
On the other hand, section element is not just for styling, it is for grouping related content. For example, the best to imagine it can be splitting whole page into different sections for different kinds of content. Single-page websites are great for this. You have some hero or intro section, about section, portfolio gallery and, say, contact.
HTML:
<body> <div class=”wrapper”> <section class=”hero”> … </section> <section class=”about”> … </section> <section class=”portfolio”> … </section> <section class=”contact”> … </section> </div> <body>
All of these “sections” of the page compose of independent content and, when viewed from semantic point of view of HTML5, give a sense. However, because of big similarity to article, good rule of thumb is to use the article element instead of the section element when there is naturally a heading (h1 – h6) right at the start of the section.
Article
The article element is similar to section with one exception. Any self-contained and independent content should be wrapped in article element. For example, blog post, forum post or a comment to post. If you want to be sure about it, ask if the content makes sense on its own. Can it be shown in RSS feed or listing of newest post and still make sense? If yes, then the content should be wrapped up inside article.
You can also use article and section elements together to divide the content.
HTML:
<!--- Multiple articles in one section --> <section role=”region”> <article> <header> <h1></h1> <h2></h2> </header> <p></p> </article> <article> <header> <h1></h1> <h2></h2> </header> <p></p> </article> </section> <!--- One article with more sections --> <article> <h1>Heading of an article</h1> <p> … </p> <section role=”region”> <h2>Resources:</h2> <a href=””> … </a> <a href=””> … </a> </section> <section role=”region”> <h3>Comments</h3> <p> … </p> <p> … </p> </section> </article> <article> <header> <h1></h1> <h2></h2> </header> <p></p> </article> </section>
In both examples the content of article element is self-contained and independent. You can post it anywhere on different types of channels like blogs, etc. Section element use an aria role attribute of “region”.
Aside
The aside element should contain additional information related to the main content. For example, sidebar for website, links for resources for an article of post, additional – Wikipedia-like information or even images related to the main content. The most important is to remember that the content of sidebar element is not necessary or essential.
HTML:
<article> <h1>Article heading<h1> <p>Content of the article</p> <aside> <a href=”...”></a> <a href=”...”></a> <a href=”...”></a> <a href=”...”></a> </aside> </article>
Another element in HTML5 to talk about is nav. This element is very self-descriptive. It is meant to wrap up links in a group like website navigation or linking to different parts of the page. However, just because you have a group of links it doesn’t mean it belongs inside a nav element. Great example for content of nav element is navigation of the website.
HTML:
<nav role=”navigation”> <ul class=”nav”> <li><a href=”...”>Home</a></li> <li><a href=”...”>About</a></li> <li><a href=”...”>Contact</a></li> </ul> </nav>
This element should also have a role attribute with value of “navigation”.
Header
When we are talking about the nav element, we can jump right into the header because these two can be used together. Again, the best example for this is the main navigation of website. Let’s take the previous code and modify it to suit this situation. The aria role attribute for header element should have value of “banner”.
HTML:
<header role=”banner”> <nav role=”navigation”> <ul class=”nav”> <li><a href=”...”>Home</a></li> <li><a href=”...”>About</a></li> <li><a href=”...”>Contact</a></li> </ul> </nav> </header>
Another use case for header element is to wrap up headings in the article like we did in examples above used for section and article elements.
Main
The next element often discussed in relation to HTML5 and similar to section and article is main. This element should be used to wrap up the main content in document outline. In other words, everything. For example, the code we used in the beginning for section element. In this situation, the div with class “wrapper” can be re-placed with main element with class, let’s say, ”wrapper”. The aria role for main element is “main”.
HTML:
<body> <main class=”wrapper” role=”main”> <section class=”hero”> … </section> <section class=”about”> … </section> <section class=”portfolio”> … </section> <section class=”contact”> … </section> </main> <body>
However, the main element should not contain any content that is repeated over the website. So, whenever you want to use this element, use it only for unique content and only once per page. Also, there are some elements that should not be included. These are for example sidebar, navigation, logo, copyright and footer. If you want to be sure, use main to wrap the individual sections of the page like in the examples code above, while excluding mentioned elements.
HTML:
<body> <header> <nav> … </nav> </header> <main class=”wrapper” role=”main”> <section class=”hero”> … </section> <section class=”about”> … </section> <section class=”portfolio”> … </section> <section class=”contact”> … </section> </main> <footer> … </footer> <body>
Summary
New elements introduced in HTML5 can be very confusing even though you will go through the documentation and read their definition. I hope this post will bring a bit more clarity into this topic and help you work more effortlessly and without doubting the syntax. Please, let me know if you find still find it difficult to work with these elements. From the different side, what are your thoughts on HTML5 and semantic syntax?
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
