Search code examples
htmlsemantic-markupmicrodata

Microdata itemprop on parent div with children


I am adding Microdata on a site, and wondering on which level the itemprop property should appear.

For example, I have the following markup:

<div itemscope itemtype="http://schema.org/Article">
    <div class="author">
        <a href="http://www.author.com">Author's Name</a>
    </div>
</div>

Where should itemprop go, in the a element directly or it is possible to add it to <div class="author"> and it would be parsed correctly?

Can I have the following:

<div itemscope itemtype="http://schema.org/Article">
    <div class="author" itemprop="author">
        <a href="http://www.author.com">Author's Name</a>
    </div>
</div>

instead of

<div itemscope itemtype="http://schema.org/Article">
    <div class="author">
        <a href="http://www.author.com" itemprop="author">Author's Name</a>
    </div>
</div>

In other words, does the itemprop property have to be defined on the element directly (such as an a or img tag) or it's possible to define it on a wrapper div with the content actually being in a child element?


Solution

  • It depends on the property (what value it should have).

    An itemprop on an element with href or src attribute (e.g., a or img) creates a URI value: it takes the value of the href/src attribute, not the element’s content.

    • Here the author property has the string value "Author's Name":

      <div itemprop="author">
          <a href="http://example.com/">Author's Name</a>
      </div>
      
    • Here the author property has the URI value "http://example.com/":

      <div>
          <a href="http://example.com/" itemprop="author">Author's Name</a>
      </div>
      

    There are some more exceptions, like the meter element or the time element. You can refer to a summary in my answer about datatypes in Microdata.

    Leaving these exceptions aside, if the value should be a string, and you have, let’s say, only div elements, it doesn’t matter on which element you specify the itemprop, so these three snippets all have the string "bar" as value for the foo property:

    <div itemprop="foo">
      bar
    </div>
    
    <div itemprop="foo">
      <div>
        bar
      </div>
    </div>
    
    <div itemprop="foo">
      <div>
        <div>
          bar
        </div>
      </div>
    </div>