Question

Usually when I have a div, I use the id attribute to uniquely identify an element.

Ex:

<div id="F123" class="sidebar-item">
    My first item goes here
</div>

Now, I need a double ‘key’ for my div element: a ‘slug’ attribute and a ‘category’ attribute.

E.g.:

<div slug="my-first-item" category="techno" class="sidebar-item">
    My first item goes here
</div>

The compilator warns me that these attributes are not valid. What is the best way to have a double key on a div? I’m pretty sure there are various ways to proceed but I’m curious about the best way?

Answer 1

<div data-slug="my-first-item" data-category="techno" class="sidebar-item">
    My first item goes here
</div>

New HTML data attributes. Why do think you need it if I may ask?