Using Microdata - HTML5 Foundations - page 162

@pommytom
</a>
</li>
</ul>
Here we have defined two attendees, with a link to their Twitter profiles. This link also acts as the url
property for the Person item.
• subEvent —If you were planning a big event, such as a music festival, you might have a number of smal-
ler events take place during the main event. You can use microdata to define these by nesting Event objects
using the subEvent property.
We could also use subevents to mark up the different activities that will be taking place during the Joe's
Pizza Co. event.
<div itemprop="subEvent" itemscope
itemtype="http://schema.org/Event">
<span itemprop="name">Extreme Pizza Tossing</span><br>
Starts <time itemprop="startDate" datetime="2013-10-05T12:00"> 12 noon
on Saturday</time>
</div>
Here, we have defined a subevent for the extreme pizza tossing demonstration.
• superEvent —A super event is the opposite of a subevent (but you already figured that out). If we had a
web page that was solely dedicated to the extreme pizza tossing demonstration we could link this subevent
to the main event by defining a superevent using the superEvent property.
<div itemprop="superEvent" itemscope
itemtype="http://schema.org/Event">
<span itemprop="name">Joe's Pizza Co. Family Fun Day</span>
</div>
An Example Event
It's time to put all of this together into a full example. Here is the Joe's Pizza Co. event in all its glory.
<div itemscope itemtype="http://schema.org/Event">
<h1 itemprop="name">Joe's Pizza Co. Family Fun Day</h1>
<img src="family-fun-day.png" alt="A family at Joe's Pizza"
itemptop="image">
<p itemprop="description">
In celebration of national American-Italian heritage month,
Joe's Pizza Co. will be hosting a family fun day at its
restaurant on Broadway. Come along for the day and take part in
exciting activities like extreme pizza tossing!
</p>
<p>
Starts: <time itemprop="startDate" datetime="2013-10-05T09:00">
Saturday 5th October at 9am</time><br>
Ends: <time itemprop="endDate" datetime="2013-10-05T17:30">
Saturday 5th October at 5:30pm</time><br>
Duration: <time itemprop="duration" datetime="T8H30M">
8 Hours and 30 Minutes</time>
</p>
<h2>Activities</h2>
<div itemprop="subEvent" itemscope