0
<!DOCTYE html>
<html lang="ae-ar">
<head data-info="f:msnallexpuser,muiflt13cf">

I am not understand the function of data info above

Amani Toama
  • 3
  • 1

3 Answers3

0

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.

Sailesh Babu Doppalapudi
  • 1,534
  • 1
  • 10
  • 22
0

"HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. 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." - MDN

You could use el.getAttribute('data-whatever') to get the data attribute in JavaScript however a better way to get the HTML data attribute is to use el.dataset.whatever, whatever being what-ever you want.

You can also get data attributes in CSS as well using the content: attr(data-whatever) or the selector: [data-whatever='value'] or [data-whatever]

FortyGazelle700
  • 124
  • 3
  • 9
0

I think the below code which I copied from W3Schools HTML data-* Attribute tutorial will help you to understand it easily.

function showDetails(animal) {
  var animalType = animal.getAttribute("data-animal-type");
  alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
<h1>Species</h1>
<p>Click on a species to see what type it is:</p>

<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>  
</ul>

If you want the definition and usage, for it, I also have copied and pasted it for you.

The data-* attribute is used to store custom data private to the page or application.

The data-* attribute gives us the ability to embed custom data attributes on all HTML elements.

The stored (custom) data can then be used in the page's JavaScript to create a more engaging user experience (without any Ajax calls or server-side database queries).

The data-* attribute consist of two parts:

The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix "data-" The attribute value can be any string Note: Custom attributes prefixed with "data-" will be completely ignored by the user agent.

The data-* attribute is a Global Attribute, and can be used on any HTML element.

Thanks and best regards!

Vishal Kalansooriya
  • 510
  • 2
  • 17