Question

I have the following HTML:

<ul class='dropSelect'>
    <li data-value="one">
        <span>Menu1</span>
    </li>
    <li data-value="two">
        <span>Menu2</span>
    </li>
    <li data-value="three">
        <span>Menu3</span>
    </li>
</ul>

My question is: is it better practice to place the data-value attribute on the span next to the actual menu item text or is it just as good to place on the parent li element as I have done? This attribute will receive data from a web service and I’m using some js to grab the value of this attribute and placing it inside of another element on the page.

SOF warned me upon posting this question that it might be too subjective … and it might be … but my concern is to understand what, if any, impact my placement of this attribute may have on UI engineering, javascript DOM manipulation, accessibility, etc.

Answer 1

Although html5 data attributes are subjective, and can be used anytime/anywhere, I’m assuming you are looking these elements up by them in your situation. In your situation I’d put them in the same place you did for a couple of reasons.

• This is the top level (child), so it’s very easy to grab them all by the data attribute.
  $('li[data-value]')

• At some point you might have much more inside each <li>, right now it might only be the <span> but by having the list-item hold the data-value you can easily get other DOM elements inside of it. If you had it inside of the span you’d have to go UP a level to the list-item, then .find() whatever element you want.

If your span held data-value:

$('[data-value="whatever"]').closest('li').find('.someOtherThing');

Instead now you don’t have to do that pointless look-up for the parent <li>!

$('[data-value="whatever"]').find('.someOtherThing');