HTML and CSS Reference
In-Depth Information
<span id="introangus">
First we have
<span itemprop="name">Angus</span>
who
is
<span itemprop="age">
7
</span>
years old.
</span><br>
<span id="introkaylee">
Next, we have
<span itemprop="name" >
Kaylee
</span>
who is
<span itemprop="age">
13
</span>
years old.
</span><br>
Photos:
<br>
Angus:
<img id="pictureangus" itemprop="picture" src="angus.jpg"><br>
Kaylee:
<img id="picturekaylee" itemprop="picture" src="kaylee.jpg">
</p>
In the previous examples, there is no way of saying what type of item each item block is,
which would prevent useful collection of the data. In order to specify a type, the
itemtype
attribute is set in the parent element. This value must be in the form of a URL:
<div itemscope itemtype="http://htmlref.com/dogs">
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>
Here the
itemprop
attribute was still set to a string as we have seen in all previous
examples. However, it is also possible to set the value to be a URL value. In this case, the
value can be collected outside of the realm of the item. This might be useful in order to fetch
all email addresses or phone numbers despite what the
itemtype
is set to.
<div itemscope itemtype="http://htmlref.com/dogs">
Dog's Name:
<span itemprop="http://htmlref.com/name">
Angus
</span><br>
Dog's Age:
<span itemprop="http://htmlref.com/age">
7
</span><br>
Dog's Birthday:
<time itemprop="http://htmlref.com/importantdates/birthday"
datetime="2002-07-22">
July 22
</time><br>
Dog's Picture:
<img itemprop="http://htmlref.com/images/picture"
src="angus.jpg">
<meta itemprop="http://htmlref.com/contest/entryID" content="498274">
</div>
In these examples, a name/value pair has been used to set the entryID. However, if the
item is associated with a globally known ID, this ID can be set using the
itemid
attribute
on the parent element. This value must also be in the form of a URL.
<div itemscope itemtype="http://htmlref.com/dogs" itemid="http://htmlref.
com/dogs/entries/498274">
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">
</div>
So far, we have just been making up metadata, which is okay as long as you are the
primary target user of the data. However, for outside consumption, there are a number of
predefined types online that have defined vocabularies such as vCard, vEvent, BibTeX,
