data-* attributes
What hides under this weird name? HTML code consists of the so-called elements, e.g.:
<h1>Headline</h1>
In this example, <h1> is an opening tag, </h1> is a closing tag, and between is the content.
Some HTML elements can have also so-called attributes. These tell us additional information about tags, e.g., a link is created with <a> tag but it logically needs also an address that is added with href attribute.
<a href="https://scrapbox.io">Scrapbox</a>
Various HTML elements can have various attributes, like <img> (for an image) has src attribute for the source of the picture. However, there is also possibility to add any attribute a developer wants. These are called "data-* attributes" because all of them start with "data-" prefix. Website cann use them, e.g., to save specific states of data directly in the HTML code.
Why are they important? From the perspective of customization, they allow us to select (and thus modify) html elements that would be otherwise not selecteble. A nice example of this in Scrapbox is data-page-title attribute.
https://scrapbox.io/files/62162be6dc1ebb001e2a7718.png