Introduction to HTML5 semantic elements
March 29, 2020
HTML5 introduced many new elements for us to use called semantic elements.
These semantic elements clearly describe their contents, not only to the browser but other developers looking at your code.
But, why were they needed? Well let's take a look at a typical website layout:
Here, we see some typical sections of a website, each section has a div element.
A div is a section or division used to group together content, this is how things have been done for a long time, and still are.
Div elements are perfectly fine to use, and are used all the time in projects of all sizes. However, the browser or screenreader us unaware of what type of content the div will contain.
Often, as we also see in the image, we can add an id attribute to each of these divs, this allows us to select a certain div we want to apply styling or layout to using CSS, or target with Javascript.
Since HTML5, we now have some alternative elements to use, just like you can see here:
Rather than using a generic div, we can now use these semantic, or descriptive elements to lay out our content.
Both the div, and all the new elements we see here still have an opening and closing tag to surround the content too.
Top and bottom of this image, we have the header and footer elements, which will now clearly describe to the browser what type of content we can expect in each section.
There is also main which contains the main content of the website, focusing on the main topic of the web page. A main element must only be used once per document.
This is not to be used for any content which is repeated in other pages such as sidebars.
For example, the aside element we see on the right, is often used for sidebars and is usually repeated across the website, therefore it is best to be kept separate from the main content.
To re-create our first example using the div tags, here is how it would look now:
This is the example we seen earlier but this time with the newer, semantic elements.
Here you can see an article element which is ideal for uses such as a blog post or a widget, which has self-contained content.
There is also a section element below too, this is as it sounds, defines a section of our web document, this is to group related content together.
We can also nest these elements even deeper too, just like this:
We also now have the nav element which we can use to surround our navigation links, we don’t need to add these to all navigation areas on our site, it is only intended for use with major blocks of nav links.
Note that we have placed this inside of the header for this example, however this is not required, it can be placed outside of the header, or even nested inside of other areas too.
We can also take things even further, by re-using elements such as the header or footer to define the header and footer section of an article for example.
Or even place sections inside of other elements such as we see in the aside section.
Remember though this is just a 1 common way to use these, they are not forced upon us to use in any particular way.
And their usage will also differ depending on the style of the website you are building, leaving selection totally up to us.
Although these are some of the most common elements, there are others too, and you can find out more on the Mozilla documentation here.