article element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The article element is a container for blocks of content considered to be independent from the document or website and can, therefore, be viewed, reused and distributed separately as in, for example, syndication. You can usually find this element wrapping articles, blog entries or forum posts.

When two or more of these elements are nested, the inner article is supposed to keep relation with the article acting as its parent. This could be the case of a blog entry (being an article itself), where each comment could be wrapped with an article element.

The article element can be used altogether with other elements like header, footer and time to add information about its contents. This information can be used, for example, by browsers or feed readers.

You shouldn't confuse the elements article and section. The article element has more meaning and implies that its contents can be treated independently from the containing document.

Examples

The following example shows a very basic use of the article element. Inside of it we can see only a title and a couple of paragraphs. Nevertheless, this content qualifies as independent and can be treated separately still making sense.

<article>
  <h1>International Organization for Standardization</h1>
  <p>The International Organization for Standardization known as ISO, is an international standard-setting body composed of representatives from various national standards organizations.</p>
  <p>...</p>
</article>

In our second example, we'll be simulating a blog entry. Here, we'll add some other elements like header, footer and time and we'll see how they work toghether for providing more information about the article.

<article>
  <header>
    <h1>The chinese cuisine</h1>
    <p>Published <time pubdate datetime="2014-03-28T20:00-04:00">2 months ago</time></p>
  </header>
  <p>Chinese cuisine includes styles originating from the diverse regions of China, as well as from Chinese people in other parts of the world. The history of Chinese cuisine in China stretches back for thousands of years and has changed from period to period and in each region according to climate, imperial fashions, and local preferences.</p>
  <p>...</p>
  <footer>
    <p>&copy; All rights reserved</p>
  </footer>
</article>

Lastly, we'll simulate a blog entry which has received a comment. The comment, suitable for syndication or independet reading, keeps relationship with its parent article.

<article>
  <h1>Time goes by</h1>
  <p>It was a cold morning, but knowing she was safe and coming back gave me the strength to get up...</p>
  <p>...</p>
  <article>
    <p><b>Mark</b>: We humans only miss the good things we have when we don't have them anymore...</p>
  </article>
</article>

Attributes

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.