HTML and CSS Reference
In-Depth Information
Using Microdata
You add microdata to your web pages using a series of new HTML attributes. These are
itemscope
,
itemprop
,
itemtype
,
itemid
and
itemref
. To teach you about these attributes you will learn how to mark up a
LocalBusiness item about a Joe's Pizza Co. restaurant.
Here is the original HTML for one of the restaurant locations in your website. In the next few sections you will learn
how to apply the new microdata attributes to this HTML code.
<section id="location1">
<h1>310 West 38th Street, NY</h1>
<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 itemscope Attribute
The
itemscope
attribute is used to define the scope of an item. It tells the browser that all the properties defined
within this element belong to a single item.
<section id="location1"
itemscope
>
<h1>310 West 38th Street, NY</h1>
<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>
In the case of our restaurant location the
itemscope
attribute would go on the
<section>
element. This is be-
cause this element contains all of the data related to that specific location.
The itemtype Attribute
The
itemtype
attribute is used to indicate what an item
is
—it might be a person, a business, or an event, for ex-
ample. The attribute should contain a URL to a web page that outlines the item schema (the template that defines all
the properties that the item can have). A computer program can use this schema to identify which properties it should
look for within an item.
<section id="location1" itemscope
itemtype="http://schema.org/LocalBusiness"
>
<h1>310 West 38th Street, NY</h1>
