Introduction to Semantic HTML5 elements

HTML5 have introduced a lot of new elements to make the HTML markup even more semantic.

In order to get a better understanding of how these elements are supposed to be used, I’ve decided to use the same example throughout this part of the tutorial. It is an article about flour, which I have borrowed from AllReceipes.

Before continuing on to the rest of the tutorials, you should have a quick look at how the article markup could have looked before the use of HTML5-elements - there are a lot of <div> elements and I will show you when these >div> can be replaced with more semantically correct markup.
Have a look at the markup with regular HTML and if you are up for a challenge you can compare it against the new HTML5 markup - otherwise follow the next chapters and I will show how and why we change the markup into semantically correct markup. (And note that if have not styled the article - it is plain semantic HTML!)

The new HTML5 elements can be used in different ways, and it is important to notice that even though I have tried to include as many views on how to use them as possible, the use of the elements is not definitive yet.

This means, that I might state that "content inside the <article> element is supposed to make sense on its own", but this is my understanding of the HTML5 specification and even though I have tried to present the most recognized use of the elements, you might read other articles that disagreed with my reading of the HTML5 specification.

This means that I very often will write one, two, or even three different views on how to use the new elements. But do not let this scare you away from using the new elements – you future-proof your webpages and this is always a good thing. Additionally, you don’t want it to become a habbit to use the <div> element to everything as this way of marking up your documents is a dying way of doing this.