Specify relations between divs

Question

I have a collection of fairly large page elements which, when clicked, slide out and slide in new elements. It would be nice to use <a> tags to link the elements together, but unfortunately the content inside each element can't be expressed solely in <span>s and other content-level elements, so I have to use a <div> as the clickable element.

What is the best way to specify the relations between the elements using a <div> or similar?

I could do something like:

<div id="attribute-1" rel="{href: '#subattribute-1'}">Details about subattribute 1</div>

and parse the rel element into Javascript. But using the rel element like that feels hacky; is there a better solution that I'm missing?

Thanks, Kevin

Answer 1

You could use data-* attributes. Like data-target. Or you could wrap the div in an a (valid in HTML5)