The <article> tag specifies a piece of writing.
It's used for blog posts, forums, newspaper articles, and more.
E-commerce articles include product descriptions, product cards, etc.
An <article> with a short story.
<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>
An <article> with a heading and a couple paragraphs.
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.
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.
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, they allow you to create comprehensive page layouts.
An example layout and a list of layout tags below.
| 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 possible, use semantic tags , like <article>, instead of the
generic <div>.
They behave the same, but specify their content better.
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 |
