HTML <article> data-* Attribute

The data-* attribute on an <article> tag attaches additional data to the article. To create a custom attribute, replace the * with a lowercase string, such as data-id, data-status, or data-location.

Example

#

A custom data-posted-date attribute on an <article>.
The attribute value is not visible, but is readable by JavaScript.

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 data-posted-date="Dec 19, 2020">
  <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 data-*

The data-* attribute adds custom information to an <article> element.

The * part is replaced with a lowercase string, such as data-id, data-cost, or data-location.

An <article> element can have any number of data-* attributes, each with their own name.

Using data-* attributes reduces the need for requests to the server.

Note: The data-* attribute is not visible and does not change the appearance of the article.


Syntax

<article data-*="value" >

Note: The * can be any string, such as data-iddata-costdata-supplier,  etc.


Values

#

Value Description
value A string value. Can be numeric, alphanumeric, JSON, etc.

More Examples

A custom data-posted-date attribute on an <article>.
Clicking the button will display the posted date value.

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 data-posted-date="Jan 4, 2021" 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="show();">Show data</button>

<script>
  let show = () => {
     let element = document.getElementById("myarticle");
     alert("Posted date = " + element.getAttribute('data-posted-date'));
  }
</script>

Code explanation

The <article> tag is assigned a data-posted-date attribute.

The data-posted-date attribute specifies when the article was posted.

Button clicks are handled by the onclick event.

Onclick invokes a JavaScript function that extracts and displays the posted date.

Note: The posted date displays very quickly without server call.


Browser support

Here is when data-* 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