Semantic HTML5 section tags:

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

This article has been fully translated into the following languages:

Thai

Is your preferred language not on the list? Click here to help us translate this article into your language!