Is it good practice to use attributes just to mark html elements?

everyone

I have a doubt about good practices writing HTML with javascript.

I've came up with an idea (probably not the first, but couldn't find a clear reference about that) to mark some elements as candidates to load some data when it's available (after some user interaction). Let me exemplify:

Suppose I have a request that returns the following:

GET    /animals/dog

{
  name: "Gutemberg",
  race: "doberman",
  age: "2y"
}

The code I wrote binds fields in the response to elements that are candidates to load such value. For example: With the request above, I could use the following tags:

<input name="dog-name-field" data-load-dog-name type="text"/>
<input name="dog-age-hid" data-load-dog-age type="hidden"/>

Each tag would receive the property value because it's marked as a candidate to do so - dog-name-field will have a value of "Gutemberg" when everything executes . That will happen everytime the request is reloaded. For now, I just get the data type I've searched ("dog"), concat it with the property "name/age" to form the attribute data-load-type-property and set a value to everyone that has such attribute.

I have a feeling that attributes are not meant to be used just like that, but I'm not aware of any real downsides to that. As I could not find it for the lack of a clear name to this aproach, I'd like some guidance.

Is there a name for such tecnique? Is it a bad practive? If so, why?

PS: To comply with SO good practives, I'd like the answers to be reference-guided and not based solely on opinion whenever possible. If no reference is provided, please, let us have a solid, well described example.