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
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
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>© 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> <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>
For information about global attributes refer to this list of global attributes in HTML5.
For information about global events refer to this list of global events in HTML5.