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!
The article tag
The article element is one of the new elements that have been introduced with HTML5. As this is a new element there has been some confusion of how to use this element. But there seems to be an agreement that you use the <article> element when you markup content, that makes sense on its own. What does this mean? It means that you could use the <article> element when marking up an “about me" page, a blog entry, and also every comment to your blog entry.
But you are not supposed to use the <article> element around every single paragraph – the point is, whatever you put in the <article> element it is supposed to make sense on its own.
Using the Flour-article, the article element should be used like this (please note, that I have replaced a lot of the actual content with three dots, so that the example does not take up too much space):
<!DOCTYPE html> <body> <article> <div id="header"> <h1>All About Flour</h1> ... </div> <div id="content"> <h2>The Two Types of Wheat</h2> <p>There are…</p> <h2>All-Purpose Flour</h2> <p>All-purpose …</p> ... </div> </article> </body> </html>
As you can see, the <article> element contains the <div id="header"> and the <div id="content"> as the content in these two <div>’s can be read as a whole article. I have not included the <div id="footer"> as the content in this element has nothing to with the actual article we still use a lot of div-elements in this example, but I will show you in the following chapters which new HTML5 elements you should use instead.
Sometimes you need more than just one example and I’ve included another: Using the blog-entry example from previous chapters, you would use the article element to wrap each blog entry like this:
<article> <h1>Just Another Day</h1> <p>Written by Christina<br /> On January 11th </p> <p class="content">This is my second blog entry, and I just wanted to check in on you </p> </article> <article> <h1>My First Blog Entry</h1> <p>Written by Christina<br /> On January 10th </p> <p class="content">I’m so happy to write my first blog entry – yay!</p> </article>
What you have learned
- <article> is a new semantic HTML5 element
- <article> should be used when the content would make sense on its own (e.g. in a rss-reader)
- <article> is a very specific element – more specific than e.g. the <div> element