Microdata on list markup not validating with W3C validator

Question

I am brand new to Microdata and I am slowly getting it. But for some reason this does not validate with the W3C validator since I’m putting a <div> in the middle of a <ul>:

<div itemscope itemtype="http://schema.org/BeautySalon">
  <ul>
    <li>
      <b>
        <span itemprop="name">foobar and you</span>
      </b>
    </li>
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
      <li>
        <span itemprop="streetAddress">6969 foobar</span>
      </li>
      <li>
        <span itemprop="addressLocality">Miami Beach</span>, 
        <span itemprop="addressRegion">FL</span>
        <span itemprop="postalCode">33139</span>
      </li>
    </div>
    <li>
      <span itemprop="telephone">305 691 6969</span>
    </li>
  </ul>
</div>

How would I correctly add the

<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> 

and correctly add all the itemprop and still be W3C valid?

Answer 1

ul doesn’t allow div as child, so you can’t use it as container for several li elements. There are various possible solutions.

I think using ul here is not appropriate. But if you want to keep using ul:

It doesn’t seem to make sense that the street address is not in the same list item as the locality/region/postal code. So you might want to put them all in the same list item (and you might also want to use br for postal addresses).

If you want to use b for the name, you could omit the span. Either specify the Microdata on the b or (for consistency) on the li.

If you don’t need a separate element for the telephone number, you could specify the Microdata on the li.

This would give you:

<div itemscope itemtype="http://schema.org/BeautySalon">
  <ul>
    <li itemprop="name"><b>foobar and you</b></li>
    <li itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
      <span itemprop="streetAddress">6969 foobar</span><br>
      <span itemprop="addressLocality">Miami Beach</span>, 
      <span itemprop="addressRegion">FL</span><br>
      <span itemprop="postalCode">33139</span>
    </li>
    <li itemprop="telephone">305 691 6969</li>
  </ul>
</div>

You can use every HTML5 element for Microdata. Re-use your existing markup. Only if you need additional elements for Microdata, add and use div/span (and possibly meta/link).