Linking independent elements in Microdata - html

Question

I'm creating a site about an author. He is the main-topic. On this site his written books are shown, too.
Unfortunately, I can't find a solution to link these books to the main person-element. I tried itemref, but it doesn't work when linking to such 'independent' element, which has no itemprop value (says the Google testing tool). Both following "book"-cases don't work.
<div id="author" itemscope="" itemtype="http://schema.org/Person">
<span itemprop="name">Marvin</span>
</div>
<div itemscope="" itemtype="http://schema.org/Book">
<span itemprop="name">Nice Book</span>
<meta itemprop="author" itemref="author" />
</div>
<div itemscope="" itemtype="http://schema.org/Book">
<span itemprop="name">Best Book</span>
<meta itemprop="author" itemscope="" itemtype="http://schema.org/Person" itemref="author" />
</div>
Has anybody another idea?

Answer 1

You have three options.
itemid
As described by #Dharmang. You give the Person a URI (with the itemid attribute) and reference this URI in each Book with the author property.
<div itemscope itemtype="http://schema.org/Person" itemid="#person-1">
</div>
<div itemscope itemtype="http://schema.org/Book">
<link itemprop="author" href="#person-1" />
</div>
<div itemscope itemtype="http://schema.org/Book">
<link itemprop="author" href="#person-1" />
</div>
(This URI can then used by others that also want to say something about this person, or that want to identify that person. So [your-domain]/[your-path]#person-1 is then a URI that represents the actual person, not just a page about that person. If there is already such a URI for that person, you might want to reuse it instead of creating your own.)
Problem: Consumer support might not be the best (but Google’s testing tool seems to recognize it).
itemref
You have to add itemprop="author" to the Person item, and reference its id from each Book with the itemref attribute. You don’t have to add a meta element for this, you simply do it on the element with the itemscope.
<div itemprop="author" itemscope itemtype="http://schema.org/Person" id="author">
</div>
<div itemscope itemtype="http://schema.org/Book" itemref="author">
</div>
<div itemscope itemtype="http://schema.org/Book" itemref="author">
</div>
Problem: The Person item can’t have a parent with itemscope (because its author property would be added to it). So this means, for example, that you can’t use the mainEntity property to denote that the Person is the primary topic of the WebPage.
itemprop-reverse
If you can nest the Book items in the Person item, you could use the itemprop-reverse attribute, which allows you to use properties in the other direction:
<div itemscope itemtype="http://schema.org/Person">
<div itemprop-reverse="author" itemscope itemtype="http://schema.org/Book">
</div>
<div itemprop-reverse="author" itemscope itemtype="http://schema.org/Book">
</div>
</div>
(If you can’t nest, you could still use it with a URI value, but using itemid in that case is probably the better choice.)
Problem: This attribute is not part of the Microdata specification. It’s defined in W3C’s Microdata to RDF Note. So consumer support might be not so good. Google’s testing tool doesn’t seem to recognize it.

Answer 2

You can use link tag to achieve this, check below snippet:
<div itemid="#author-marvin" itemscope="" itemtype="http://schema.org/Person">
<span itemprop="name">Marvin</span>
</div>
<div itemscope="" itemtype="http://schema.org/Book">
<span itemprop="name">Nice Book</span>
<link itemprop="author" href="#author-marvin">
</div>
<div itemscope="" itemtype="http://schema.org/Book">
<span itemprop="name">Best Book</span>
<link itemprop="author" href="#author-marvin">
</div>
itemid of author snippet should match the href of link in book snippet throughout the page markup.
More examples here