HTML <article> Tag

The <article> tag defines an article or a self-contained piece of writing. This element can also be used for blog posts, forum posts, magazine or newspaper articles, user content, product items, and more.

HTML Tag

Example

#

An <article> tag.
It contains a short story about Vincent Van Gogh's life in France.

The time in Arles, France became one of Van Gogh's more prolific periods: he completed 200 paintings and more than 100 drawings and watercolors. He was enchanted by the local countryside and light; his works from this period are rich in yellow, ultramarine, and mauve.
<article>
   The time in Arles, France became one of Van Gogh's more 
   prolific periods: he completed 200 paintings and 
   more than 100 drawings and watercolors. He was 
   enchanted by the local countryside and light; 
   his works from this period are rich in yellow, 
   ultramarine, and mauve.
</article>

Using <article>

The <article> tag specifies an area on a page with a piece of writing.

This element is commonly used for blog posts, forum posts, newspaper articles, and more.

Articles can also be used in an e-commerce context, with product descriptions, product cards, etc.

More Examples

An <article> with a heading and a couple paragraphs.

Early life of Van Gogh

Van Gogh returned to Etten in April 1881 for an extended stay with his parents. He continued to draw, often using his neighbors as subjects. In August 1881, his recently widowed cousin, Cornelia Vos-Stricker, daughter of his mother's older sister arrived for a visit.

He was thrilled and took long walks with her. Cornelia was seven years older than he was and had an eight-year-old son. Van Gogh surprised everyone by declaring his love to her and proposing marriage. She refused with the words: "nooit, neen, nimmer" (nay, no, never).

<article>
  <h2>Early life of Van Gogh</h2>
  <p>
     Van Gogh returned to Etten in April 1881 for an extended stay 
     with his parents. He continued to draw, often using his neighbors 
     as subjects. In August 1881, his recently widowed cousin, Cornelia 
     Vos-Stricker, daughter of his mother's older sister arrived for 
     a visit. 
  </p>
  <p>
     He was thrilled and took long walks with her. Cornelia was seven 
     years older than he was and had an eight-year-old son. Van Gogh 
     surprised everyone by declaring his love to her and proposing marriage. 
     She refused with the words: "nooit, neen, nimmer" (nay, no, never). 
  </p>
</article>

Tip: When posting an article on the web use the article tag instead of a div.
They behave the same, but article is better at defining its content.


Attributes for <article>

The <article> element has no attributes, but it does accept global attributes.
The following are commonly used.

Attribute Value Description
id    value Provides the article element with a unique identifier.
class    classnames Assigns one or more classnames to the article element.
style    CSS-values Assigns CSS style values to the article element.
data-*    value Defines additional data that can be used by JavaScript.
hidden    hidden Specifies whether the element is hidden.

For other global attributes see our global attributes list.


Layout Tags

The <article> tag is part of a group of semantic tags that help with creating the layout of web pages. This group is referred to as the Layout tag group. Together, these tags allow you to create comprehensive page layouts.

An example layout and a list of layout tags below.

HTML Layout
Element Description
<header> Defines a header section on a page or a section of a page
<main> Creates a container for the main content of the page
<footer> Defines a footer section on a page or a section of a page
<nav> Creates a container for navigation links
<aside> Creates a content area that is related to the primary content on a page
<article> Defines a container for independent and self contained text
<section> Defines a piece of content that can stand on its own
<div> Creates a division or section on a page

Note: Layout tags define areas on a page that contain content. By default these tags have no visual appearance, but are often made visible by styling -- for example with a border or background color.

Tip: When appropriate, use semantic tags instead of the generic <div>.

Browser support

Here is when <article> support started for each browser:

Chrome
6.0 Sep 2010
Firefox
4.0 Mar 2011
IE/Edge
9.0 Mar 2011
Opera
11.1 Mar 2011
Safari
5.0 Jun 2010

You may also like

Guides