Adding Semantics

Describing the roles of the elements gives them programatically determined semantic meaning:

<div role="wairole:tree">
  <div role="wairole:treeitem">Veggies
    <div role="wairole:group">
      <div role="wairole:treeitem">Green
        <div role="wairole:group">
          <div role="wairole:treeitem">Asparagus</div>
          <div role="wairole:treeitem">Kale</div>
          <div role="wairole:treeitem">Leafy
            <div role="wairole:group">
              <div role="wairole:treeitem">Lettuce</div>
              <div role="wairole:treeitem">Kale</div>
              <div role="wairole:treeitem">Spinach</div>
              <div role="wairole:treeitem">Chard</div>
            </div>
          </div> ---close leafy
          <div role="wairole:treeitem">Green beans</div>
        </div>
      </div> ---close green
      <div role="wairole:treeitem">Legumes</div>
      <div role="wairole:treeitem">Yellow
        <div role="wairole:group">
          <div role="wairole:treeitem">Bell peppers</div>
          <div role="wairole:treeitem">Squash</div>
        </div>
      </div> ---close yellow
    </div>
  </div> ---close veggies
</div> ---close tree