HTML5 article element

Jakob Jenkov
Last update: 2014-06-15

The HTML5 article element is used to semantically mark the main content section or sections of a page.

An HTML5 page may contain multiple individual parts of main content. For instance, a blog website may contain a page with multiple blog posts in. In that case, each blog post would be enclosed in its own article element. Another example could be individual news articles on a news site.

Here is an illustration of a page with multiple content sections:

The main content sections of an HTML5 page.
The main content sections of an HTML5 page.

Here is how it could look in HTML5 code:

          Logo etc.
              <a href="page1.html">Page 1</a>
              <a href="page2.html">Page 2</a>
              <a href="page3.html">Page 3</a>

            <a href="subpage1.html">SubPage 1</a>
            <a href="subpage2.html">SubPage 2</a>
            <a href="subpage3.html">SubPage 3</a>

            <p>Main content section 1</p>

            <p>Main content section 2</p>



Remember that the article element is a semantic element. It does not have any special look. You can still style it using CSS though, as you can with a div element.

Also remember, that being a semantic element you do not have to put a article element into your page. The article element is intended to be used by future intelligent browsers (maybe) and web crawlers etc. but there is no guarantee about how these software components will use these elements. Only the future will tell.

Main Content Headers

In case your main content sections have head lines or other header information (publishing date, author etc.), that content goes inside the article element. Here is an example:

    <p>Main content section 1</p>

Jakob Jenkov

Featured Videos

Java ForkJoinPool

P2P Networks Introduction


Java Persistence
Close TOC
All Tutorial Trails
All Trails
Table of contents (TOC) for this tutorial trail
Trail TOC
Table of contents (TOC) for this tutorial
Page TOC
Previous tutorial in this tutorial trail
Next tutorial in this tutorial trail