what are data-* HTML attributes?

Question

I've recently found on one of the sites opening tag like this:

<script data-ip="93.1xx.3.2x" data-backuri="something.com">

And I couldn't find any information about it. What are those tags used for?

Answer 1

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.