Dofactory.com
Dofactory.com

HTML <article> Tag

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.

Example

#

An <article> with a short story.

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>

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, they 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 possible, use semantic tags , like <article>, instead of the generic <div>. They behave the same, but specify their content better.


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


Last updated on Sep 30, 2023




Guides