HTML and CSS Reference
In-Depth Information
<span
itemprop="email"
>joe@example.com</a>
•
openingHours
—Defining the opening hours can be a little trickier. Programs will take the data from the
datetime
attribute of a
<time>
element as the value for the
openingHours
property. When specify-
ing this property you should first define the day(s) using two-letter representations (Mo, Tu, We, Th, Fr, Sa,
Su) and then specify the times.
Here is an example of opening times between 9 a.m. and 5 p.m., Monday to Friday.
<time
itemprop="openingHours" datetime="Mo-Fr 09:00-17:00"
>
Monday to Friday 9am-5pm
</time>
Here is an example that uses the same opening hours but is closed on Wednesdays.
<time
itemprop="openingHours" datetime="Mo,Tu,Th,Fr 09:00-
17:00"
>
9am-5pm Weekdays (closed Wednesdays)
</time>
Schema.org specifies that you should use two-letter representations for days, but be aware that this will cause
your markup validations to fail. This is an example of when achieving 100% validation is not possible.
Using Microdata in Your Restaurant Website
Now that you have an understanding of microdata and how it should be used, take another look at the website you
are building for Joe's Pizza. Your Locations page currently contains the information of all three restaurants run by
Joe's Pizza Co.
In this example, you are going to use the LocalBusiness item to mark up each restaurant location. To do this, follow
these instructions.
The code for this exercise can be found in the download code for Chapter 8, folder 1.
1.
Open the
locations.html
file in your text editor.
2.
Create a new
<meta>
element below the
<h1>
element in the page text. This will be used to specify the
company name.
3.
Add an
id
attribute to this
<meta>
element and set its value to be
company-name
.
<meta id="company-name">
4.
Now add an
itemprop
attribute and set its value to
name
.
<meta id="company-name"
itemprop="name"
>
