HTML <article> data-* Attribute

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

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

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

<article data-*="value" >

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

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

<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

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

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

• Our HTML article Tag Reference
• Our HTML data Attribute Reference
• Our CSS Tutorial