Unfamiliar HTML Properties in Avada and Divi Themes [closed]

These are called data attributes, which are custom attributes in the format of data-* used to attach more info to the html elements.

This link here gives good examples on how to use them:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Example:

<div id='el' data-my-attr="attr_value"></div>

JavaScript:

Most of the time, these info are used by JavaScript to fetch data and process them accordingly.

document.getElementById('el').dataset.myAttr; //Notice the property name uses CamelCase to replace the '-'s.

//Or using either of jQuery methods:
$('#el').data('myAttr');
$('#el').attr('data-my-attr);

CSS:

/* Use as selector */
div[data-my-attr="attr_value"]{
    /* styles */
}

And apparently you can also fetch its values using attr():

#el::before{
  content: attr('data-my-attr');
}

So I guess one use for this is generating dynamic html and then set the CSS properties using the attr() in the CSS styles.