HTML <article> class Attribute

The class attribute on an <article> tag assigns one or more classnames to the article. Classes are used to style elements. Classnames are defined in a stylesheet or in a local <style> element.

Example

#

A class attribute styling an <article> element.
This class adds an accent border to the article.

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).

<style>
  .blue-border {border-left:solid 4px lightblue; padding-left:20px;}
</style>

<article class="blue-border">
  <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>

Using class

The class attribute assigns one or more classnames to the <article> tag.

Multiple classnames are separated by a space.

Classes (i.e. classnames) are used for styling the article element.

JavaScript uses classes to access one or more elements by classname.

Tip:  class is a global attribute that can be applied to any HTML element.


Syntax

<article class="classnames" >

Values

#

Value Description
classnames One or more space-separated class names.

More Examples

A class attribute styling an <article>.
Clicking the button will toggle a classname that changes the border color.

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).


<style>
  .bordered { border-left: solid 4px white; padding-left:20px;}
  .lightblue { border-color: lightblue }
  .orangered { border-color: orangered; }
</style>

<article class="bordered lightblue" id="myarticle">
  <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>

<br/>
<button onclick="toggle();">Toggle class</button>

<script>
  let toggle = () => {
     let element = document.getElementById("myarticle");
     element.classList.toggle("orangered");
  }
</script>

Code explanation

Three CSS classes are defined in the <style> element.

The class attribute in <article> assigns two of those classes.

Repeatedly clicking the button toggles the third class, changing the border color.


Browser support

Here is when class 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

 Back to <article>
Guides