We can create our own JSX element attributes! When we create our own JSX attributes we should not include whitespace in the attribute name, instead we should use either dashes or camelCase to separate multi-word attributes, or we can use our custom multi-word attribute name as a single word.
Example: app.js
const myH1 = <h1 my-custom-attribute="my-custom-attribute-value" myOtherCustomAttribute="my-other-custom-attribute-value" anothercustomattribute="another-custom-attribute-value">Hello React</h1>;
//all of the above attributes `my-custom-attribute`, `myOtherCustomAttribute`, and `anothercustomattribute` are valid JSX
html custom attributes are for signing some values to the elements so you can then manipulate them in JS and having nicer user experience. So basically they are not like classes where you have some functionallity, they are jus some values which you define just after you mention them in html tag