Nowhere can I find a clear answer

    1 answer 1

    These are data-* attributes. Used to add additional information to the DOM element. From the article on the link:

    HTML syntax

    The syntax is simple - any attribute whose name starts with data- is a data-* attribute. Suppose we have an article and we want to save additional information without a visual presentation. To do this, you can use the data attributes:

     <article id="electriccars" data-columns="3" data-index-number="12314" data-parent="cars"> ... </article>

    Javascript access

    Reading data attributes in JavaScript is also easy. To do this, you can use the getAttribute() method with a parameter equal to the full name of the attribute. But there is a simpler way using the .dataset object.

    To get the data attribute, you can take a dataset object dataset with the name equal to the part of the attribute name after the data- (note that the hyphens in the name are converted to camelCase).

     let article = document.getElementById('electriccars'); article.dataset.columns // "3" article.dataset.indexNumber // "12314" article.dataset.parent // "cars"

    Each property is a string and can be read and written. In the example above, executing the code article.dataset.columns = 5 will result in the new attribute value being "5" .