Need Help with HTML Best Practices with the Dialog Widget (JQ UI)

Need Help with HTML Best Practices with the Dialog Widget (JQ UI)

Hello Forum!

Please see code below. Everything works fine, but according to many HTML validators, using <div>'s as children of <li>'s is not best practice. What would you suggest I use instead? <li> works as well, but I'd like to know if there are other acceptable ways as well.

Thanks!

HMTL
  1. <ul class="PM-list">
  2.       <li class="dialog">Button 1</li>
  3.       <div title="Content 1 Title">Content 1</div>
  4.       <li class="dialog">Button 2</li>
  5.        <div title="Content 2 Title">Content 2</div>
  6. </ul>

JS

  1. $(".dialog").each(function () {
  2.       var dialog = $(this).next().dialog({ autoOpen: false });
  3.       $(this).click(function () {
  4.       dialog.dialog("open");
  5.       });
  6. });