The community is working on translating this tutorial into Chinese, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".
If you are fluent in Chinese, then please help us - just point to any untranslated element (highlighted with a yellow left border - remember that images should have their titles translated as well!) inside the article and click the translation button to get started. Or have a look at the current translation status for the Chinese language.
If you see a translation that you think looks wrong, then please consult the original article to make sure and then use the vote button to let us know about it.
Please help us by translating the following metadata for the article/chapter, if they are not already translated.
If you are not satisfied with the translation of a specific metadata item, you may vote it down - when it reaches a certain negative threshold, it will be removed. Please only submit an altered translation of a metadata item if you have good reasons to do so!
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.