HTML and CSS Reference
In-Depth Information
<img src="img/map1.png"
alt="Joe's Pizza at 310 West 38th Street, NY">
<p class="location-phone">212 012 3456</p>
<h2>Opening Hours:</h2>
<p>
Mon-Fri: 12:00 - 22:00<br>
Sat-Sun: 11:00 - 23:00
</p>
</section>
The itemprop Attribute
The
itemprop
attribute is used to define each of the properties of an item. The value of this attribute should be set
to a property name from your chosen schema.
<section id="location1" itemscope
itemtype="http://schema.org/LocalBusiness">
...
<img src="img/map1.png"
alt="Joe's Pizza at 310 West 38th Street, NY"
itemprop="image"
>
<p class="location-phone"
itemprop="phone"
>
212 012 3456
</p>
...
</section>
If you take a look at the LocalBusiness schema (
http://schema.org/LocalBusiness
) you will notice that
two of the properties the item has are
image
and
phone
. Here I have added the
itemprop
attribute to the
<img>
element and the
<p>
element that contains the phone number and have set the value of these attributes to
image
and
phone
.
Usually, the value of the item property will be the text content contained within the element; however, if you are us-
ing the
itemprop
attribute on an
<img>
,
<video>
, or
<audio>
element, it will use the value of the
src
attrib-
ute. When you use
itemprop
on an
<a>
element it will use the value of the
href
attribute.
LocalBusiness items also have a property called
openingHours
. The opening hours for a business may not be the
same for every day of the week. You can accommodate this by having multiple instances of the same property.
<section id="location1" itemscope
itemtype="http://schema.org/LocalBusiness">
<h1>310 West 38th Street, NY</h1>
<img src="img/map1.png"
alt="Joe's Pizza at 310 West 38th Street, NY"
itemprop="image">
<p class="location-phone" itemprop="phone">
212 012 3456
</p>
<h2>Opening Hours:</h2>
<p>
<time
itemprop="openingHours"
datetime="Mo-Fr 12:00-22:00">
