Connect two microdata items that are not in the same scope

Question

Lets assume my html page looks like this:

<div itemscope itemtype="http://schema.org/videoObject">

<span itemprop="name">My Video Name</span>

</div>

...rest of the page...

<textarea rows="7" cols="54" readonly="readonly"><?php echo $embedUrl?></textarea>

I want to add an itemprop="embedUrl" for the textarea as it contains the embeded code for my videoobject, but since it's not in my div, as this is the way the page is designed, I have to create a new videoobject in order to specify that. How can I extend the scope of my original videoobject to contain the textarea, even-though it's not in the original div?

Answer 1

Your use case is what the itemref attribute is for.

You use it like this:

<div itemscope itemtype="http://schema.org/videoObject" itemref="mytextarea">
    <span itemprop="name">My Video Name</span>
</div>

...rest of the page...

<textarea rows="7" cols="54" readonly="readonly" 
    id="mytextarea" itemprop="embedUrl"><?php echo $embedUrl?></textarea>

The itemref attribute must be on the same element as the itemscope attribute and takes a space separated list of ids of elements with itemprop attributes.

For more information, check out this HTML5 Doctor article on microdata