HTML and CSS Reference
In-Depth Information
It is also possible to have an
itemprop
be another item by setting the
itemscope
attribute in the same tag as the one in which the
itemprop
attribute is set. This creates a
hierarchy of data:
<div itemscope>
Dog's Name:
<span itemprop="name">
Angus
</span><br>
Dog's Age:
<span itemprop="age">
7
</span><br>
Dog's Birthday: <
time itemprop="birthday" datetime="2004-07-22">
July 22
</
time><br>
Dog's Picture:
<img itemprop="picture" src="angus.jpg"><br>
<meta itemprop="entryID" content="498274">
Current Points:
<br>
<div itemprop="points" itemscope>
Appearance:
<span itemprop="appearance">
10
</span><br>
Obedience:
<span itemprop="obedience">
8
</span><br>
Talent:
<span itemprop="talent">
7.5
</span><br>
</div>
</div>
In this example, the following hierarchy is added:
points:
appearance: 10
obedience: 8
talent: 7.5
It is also possible to have multiple items at the top level. We could simply create two
separate blocks of data:
<div itemscope>
Dog's Name:
<span itemprop="name">
Angus
</span><br>
Dog's Age:
<span itemprop="age">
7
</span><br>
Dog's Birthday:
<time itemprop="birthday" datetime="2002-07-22">
July 22
</
time><br>
Dog's Picture:
<img itemprop="picture" src="angus.jpg">
<meta itemprop="entryID" content="498274">
</div>
<div itemscope>
Dog's Name:
<span itemprop="name">
Kaylee
</span><br>
Dog's Age:
<span itemprop="age">
13
</span><br>
Dog's Birthday:
<time itemprop="birthday" datetime="1995-11-26">
November
26
</time><br>
Dog's Picture:
<img itemprop="picture" src="kaylee.jpg">
<meta itemprop="entryID" content="472391">
</div>
However, it might be necessary to intermingle data. If so, the
itemref
attribute can be
set on the parent item to a list of space separated IDs to indicate additional elements that
should be traversed to find name/value pairs for this item.
<div id="angus" itemscope itemref="introangus pictureangus"></div>
<div id="kaylee" item scope itemref="introkaylee picturekaylee"></div>
<p>
There are two dogs in the competition today.
<br>
