HTML5 Custom Data Attribute

By Xah Lee. Date: . Last updated: .

HTML5 has a “custom data attribute”. It lets you have any attribute/value pairs in a tag. Such attribute's name starts with data-. Here's a example used by Twitter:

<a href="https://twitter.com/share" class="twitter-share-button" data-via="john">Tweet</a>

here's what the html standard say:

A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no uppercase ASCII letters.

[2018-10-19 from http://w3c.github.io/html/dom.html#custom-data-attribute]

Why's This Useful?

Here's one example of using it to store accessed date of a site.

<a href="…" data-accessed="2012-09-22">7 Tips You Must Know</a>

Using JavaScript to Access Custom Data Attribute

You can use JavaScript/DOM's “getAttribute” method, like any other attribute.

[see DOM: Get Element's Attribute Value]

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog