Semantic HTML groupings of <li> lists

A few approaches on grouping HTML lists..

For listbox (popup) similar to <select>:

<div role="menu">
  <ul role="group">
    <li role="option">...</li>
    <li role="option">...</li>
  </ul>
  <ul role="group">
    <li role="option">...</li>
    <li role="option">...</li>
  </ul>
<div>

For list (no popup):

<div role="list">
  <ul role="group">
    <li>...</li> <!-- default role is listitem -->
    <li role="none">
      <a role="listitem">...</a>
    </li>
  </ul>
  <ul role="group">
    <li>...</li>
    <li>...</li>
  </ul>
<div>

For menuitems, optionally wrap in <nav> if navigation menu:

<nav> <!-- optional nav tag only use when navigation -->
  <div role="menubar">
    <ul role="menu">
      <li role="menuitem">...</li>
      <li role="none">
        <a role="menuitem">...</a>
      </li>
    </ul>
    <ul role="menu">
      <li role="menuitem">...</li>
      <li role="menuitem">...</li>
    </ul>
  </div>
<nav> <!-- optional nav tag only use when navigation -->

For treeview (nested list):

<div role="tree">
  <li role="treeitem">...</li>
  <ul role="group">
    <li role="treeitem">...</li>
    <li role="none">
      <a role="treeitem">...</a>
    </li>
  </ul>
  <ul role="group">
    <li role="treeitem">...</li>
    <li role="treeitem">...</li>
  </ul>
<div>

piouson/html_list_groups.md