Chapter 4. Advanced Usage

Adding embedded items

Some properties are items itself, so we can choose to add them as plain properties or to create a new itemtype block.

What's the difference? When you add a new block, you have access to all of its (and its parent) properties, so you can add much more information rather than adding a simple attribute.

Let's continue with the previous example, your final text should be this:

<div itemscope="" itemtype="http://schema.org/Movie">
    <h1 itemprop="name">Avatar</h1>
    <span>Director: James Cameron (born August 16, 1954)</span> 
    <span itemprop="genre">Science fiction</span> 
    <a itemprop="trailer" href="http://www.example.com/movies/avatar-theatrical-trailer.html">
        Trailer
    </a>
</div>
		

The director section has a lot of unstyled information: name, surname and date of birth, so let's turn them into a machine-readeable format. But first of all we need to do a little change: convert the <span> element into a <div>.

Example 4.1. Prepare your "Director" block

<div itemscope="" itemtype="http://schema.org/Movie">
    <h1 itemprop="name">Avatar</h1>
    <div>Director: James Cameron (born August 16, 1954)</div> 
    <span itemprop="genre">Science fiction</span> 
    <a itemprop="trailer" href="http://www.example.com/movies/avatar-theatrical-trailer.html">
        Trailer
    </a>
</div>
            

Now select <div>Director: James Cameron (born August 16, 1954)</div> and select the director attribute. You can choose to add it as property or to create a new itemtype block: select the latter one and apply it to the current element.

Great! Now you're ready to style everything inside the director property!

Example 4.2. Creating an embedded itemtype

<div itemscope="" itemtype="http://schema.org/Movie">
    <h1 itemprop="name">Avatar</h1>
    <div itemprop="director" itemscope="" itemtype="http://schema.org/Person">
        Director: James Cameron (born August 16, 1954)
    </div>
    <span itemprop="genre">Science fiction</span> 
    <a itemprop="trailer" href="http://www.example.com/movies/avatar-theatrical-trailer.html">
        Trailer
    </a>
</div>
            

Select James Cameron and add the name property (you can find it under the Type node). Remember to wrap the text with a new span element.

After that select August 16, 1954. As you can see, it's James Cameron birthdate, let's style it.

Select the birthDate property: things are quite different, this time. Infact we have to convert this text into a standard time format, so let's input 1954-08-16 in the List of possible Values, leaving the hour/minutes field blank.

[Note]Note

You have to input the time using this format: YYYY-MM-DD

[Tip]Tip

There is a small datepicker next to the field, you can use it instead of typing the date manually.