SHARE

Understanding the New Way to Present Content on the Web- Using “Article” Markup Element in your HTML Pages

Written By

Aug 7, 2013

8/6/13

As discussed in an earlier article on HTMLGoodies, HTML5 introduced a lot of new markup elements to enable rich web authoring.

The “article” markup element is one of the new sectioning elements introduced in HTML5.

The HTML5 specification defines “article” markup element as a self-contained composition in a document, page that is independently reusable in syndication.

It can be used for a newspaper article, a blog entry or a forum post, or any independent item of content.

Few notes facts about “article” markup element

Article markup element can be used where flow content is expected.
The “article” markup elements are global attributes.
The “article” element uses “HTMLElement”.
An “article” markup element can have headers
An “article” markup element can have footers.
“Article” markup elements can be nested.
When “article” elements are nested, the nested elements should be principally related to the parent article. A classic example would be comments on a blog post are related to the blog post.
“Article” markup elements can work with “section” markup elements. However, note that “article” is used when the content is self-contained. HTML5 specification does not dictate that “section” element should have the content which is self-contained.

Using “article” markup element

Simply put, a simple HTML5 webpage using article markup element looks as under.

<!DOCTYPE html>

<html>

<title>Article sample</title>

<body>

<h1>Article sample</h1>

<p>The First sample using Article markup element</p>

</header>

<p>HTML Goodies</p>

</footer>

</article>

</body>

</html>

This will result in a display on the web page as under:

Nested “article” markup elements need to put under a section element.

<!DOCTYPE html>

<html>

<title>Article sample 2</title>

<body>

<h1>Article sample using nested articles</h1>

<p>The Second sample using Article markup element</p>

</header>

<p>HTML Goodies</p>

</footer>

<h1>Comments</h1>

<p>Posted by: Commenter 1</p>

</footer>

<p>This is a a very trivial example</p>

</article>

<p>Posted by: Commentor 2</p>

<p><time datetime=”2013-07-27″>1 minute ago</time></p>

</footer>

<p>Nah, this looks like an advanced concept.</p>

</article>

</section>

</article>

</body>

</html>

The webpage above will look as under:

If you are having trouble following along, you can download the sample HTML5 files here.

File 1

File 2

Summary

In this article, we learned about using “article” markup element to represent self-contained information.

About the author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com

Understanding the New Way to Present Content on the Web- Using “Article” Markup Element in your HTML Pages

Vipul Patel

Recommended for you...

Company

Categories