What Are Data-* HTML Attributes

what are data-* HTML attributes?

data-* attributes are custom HTML attributes.

Basically, there are standard HTML attributes like style, src, width, height, class... and these have a special meaning to browsers and are 'reserved'.

However, custom attributes have no special meaning generally and are only special to the owner's application. They can be used to simplify an application's logic.

Using data- before your attribute name ensures that future standard attributes will not use your current attribute. For example, imagine today you are using a sound attribute but then the HTML standard adds a sound attribute meaning something other than what you meant. Had you used data-sound, you would have been fine because there would be no conflict. The specification says no future standard browser attributes will start with data-.

See jquery get HTML 5 Data Attributes with hyphens and Case Sensitivity for some useful info on why we use data-* attributes.

Also, see MDN docs for some useful information.

What is the purpose of storing custom data on HTML data attributes?

One use case I currently used was I created a component in react and used pseudo elements to take data from data attribute ie. data-title value will be taken by CSS in content: attr(data-title) so what ever value I am passing to component shows directly via css and also there are so many use cases for eg you need some value to be instead of passing whole object on click function you just add click event and it will take values from data attributes instead.

These two use cases I can think of rite now.

----------- UPDATE ---------------

data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM, hacks can make your HTML invalid in many cases or create unknown bugs. Common attributes that we use are class, id etc and for custom attributes you can use data-*. The main motivation behind introduction of data attribute is to allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM. So when you ask what's better approach you, all you can think about is there are multiple ways to achieve same thing and it's subjective to developer to take approch.

What are data-url and data-key attributes of a tag?

When Should I Use the Data Attribute?

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

---

This time the data attribute is used to indicate the bubble value of the notification bubble.

<a href="#" class="pink" data-bubble="2">Profile</a>

This time is used to show the text for the tooltip.

<a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a>

---

When Shouldn’t I Use the Data Attribute?

We shouldn’t use data attributes for anything which already has an already established or more appropriate attribute. For example it would be inappropriate to use:

<span data-time="20:00">8pm<span>

when we could use the already defined datetime attribute within a time element like below:

<time datetime="20:00">8pm</time>

---

Using Data Attributes With CSS (Attribute selectors)

[data-role="page"] {
  /* Styles */
}

---

Using Data Attributes With jQuery (.attr())

<a href="http://www.google.com" class="button" data-info="The worlds most popular search engine">Google</a>

$('.button').click(function(e) {
   e.preventDefault();
   thisdata = $(this).attr('data-info');
   console.log(thisdata);
 });

Examples and info from here

Why should I use data- in my attributes or dashes in my tags?

The data-* attributes have two advantages:

1. It is a convention meaning other programmers will understand quickly that it is a custom attribute.
2. You get a DOM Javascript API for free: HTMLElement.dataset. If you use jQuery, it leverages this to populates the keys and values you find with .data().

The reason for the - in custom element names is for two basic reasons:

1. It is a quick way for the HTML parser to know it is a custom element instead of a standard element.
2. You don't run into the issue of a new standard element being added with the same name which would cause conflict if you register a custom Javascript prototype for the DOM element.

Should you use your own custom element name? Right now it is so new that don't expect it to be fully supported. Let's say it does work. You have to balance the issue of the extra complexity with the benefit. If you can get away with a classname, then use a classname. But if you need a whole new element with a custom Javascript DOM prototype for the element, then you may have a valid usage of it.

what is data-info in html?

data-* attribute in HTML stores custom values. This stored data can be retrieved in JavaScript. In your case, data-info is the attribute name and its value is f:msnallexpuser,muiflt13cf. Value can be retrieved using getAttribute function in JavaScript.

Why should I prepend my custom attributes with data-?

There are several benefit for keeping custom attributes prefixed with data-*.

1. It guarantees there will not be any clashes with extensions to HTML in future editions. This is a problem that has been encountered to some degree already with some of the new attributes introduced in HTML5, where existing sites were using attributes with the same name and expecting different and incompatible, custom behaviour. (e.g. the required attribute on input elements is known to have had some clashes on some popular websites in the past)

2. There is a convenient DOM API, HTMLElement.dataset, for accessing these attributes from scripts. It is now supported in most browsers.

3. They provide a clear indication of which attributes are custom attributes, and which ones are standardised attributes. This not only helps validators by allowing them to permit any attribute with data-* while still performing useful error checking for other attributes (e.g. to catch typos), it also helps make this aspect of the source code clearer to those reading it, including people who may work on a website after the original author.

---

Related Topics