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