Multiple Time Elements with Microdata

Question

I have a definition list representing my business' opening hours:

<dl>
  <dt>Monday - Friday</dt>
  <dd>8:30am to 5:30pm</dd>
  <dt>Saturday - Sunday</dt>
  <dd>9:00am to 5:00pm</dd>
  <dt>Holidays</dt>
  <dd>Closed</dd>
</dl>

This seems like a good, structured way to arrange this content. But perhaps I am wrong?

I am wondering how I would use the time element to represent the opening hours?

Ultimately, I was looking at doing something like this:

<time itemprop="openingHours" datetime="Mo,Tu,We,Th,Fr 8:30-17:30">Monday - Friday, 8:30am to 5:30pm</time>

But with the days of the week in the dt tag and the hours in the dd's, I'm not sure what the proper approach to the markup would be? Two different time tags seems wrong.

Answer 1

With Microdata, you are not "annotating" your HTML markup. The markup serves only as a carrier. After a Microdata consumer parsed the page, there is no relation between the HTML and the Microdata items anymore.

So you have actually two questions:

• Which HTML5 markup should I use?
• How can I use this markup to add what I want to say with Microdata?

HTML5

The HTML5 question is easy: You can use the time element for everything that is a date, time, time-zone offset, or duration. So your dl could look like:

<dl>
  <dt>Monday - Friday</dt>
    <dd><time datetime="08:30">8:30am</time> to <time datetime="17:30">5:30pm</time></dd> <!-- could also use a duration string instead, or an additional time element; but probably doesn’t make much sense in this context -->
  <dt>Saturday - Sunday</dt>
    <dd><time datetime="09:00">9:00am</time> to <time datetime="17:00">5:00pm</time></dd>
  <dt>Holidays</dt>
    <dd>Closed</dd>
</dl>

Schema.org and Microdata

Now looking at the definition of schema.org’s openingHours property, we see that there is no mandatory content format: "Opening hours can be specified as […]" (emphasis mine).

However, the syntax they document/recommend as possible format is invalid HTML5: the time element can’t have a datetime value like "Mo,Tu,We,Th,Fr 8:30-17:30" or "Mo-Su" (I created an issue).

So if you want to use this documented format, you should not use the time element. Instead, you could

• use the data element and its value attribute:

  <data itemprop="openingHours" value="Mo,Tu,We,Th,Fr 8:30-17:30">…</data>
  

  You could use it to wrap the content of the corresponding dt or dd, if you like.

• use a meta element:

  <meta itemprop="openingHours" content="Mo,Tu,We,Th,Fr 8:30-17:30">
  

  You could place it as child of the corresponding dt or dd, if you like (yes, in the body).

You might want to use openingHoursSpecification → OpeningHoursSpecification instead.