Question

I generally use ul for lists of items

<ul class="users">
  <li class="user">
    <div class="name">Jack</div>
    <div class="gender">M</div>
    <div class="salary">$15k</div>
    <div class="rank">Burger Flipper</div>
  </li>
  <li class="user">
    <div class="name">Jill</div>
    <div class="gender">F</div>
    <div class="salary">$17k</div>
    <div class="rank">Fry Tosser</div>
  </li>
</ul>

When creating a heading for this list, is it best to include the heading as part of the list

  <li class="user head">
    <div class="human-attributes">This is:</div>
    <div class="job-attributes">They are:</div>
  </li>

or should it be a separate list?

<ul class="users head">
  <li class="user">
    <div class="human-attributes">This is:</div>
    <div class="job-attributes">They are:</div>
  </li>
</ul>

Answer 1

depends on what you want to do with it .. .You really should be using:

<table><thead></thead><tbody></tbody></table> 

constructs which are meant for content you are describing, instead of <li> embedding a <div> which is going to get rendered in a bizarre way by default.

You can then use CSS to control the behaviour.