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".
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
