How to link hours element to days element for Schema.org's "openingHours" in Microdata?

Question

I am currently doing the markup for a website. I have got to the openingHours.

The problem I ran into is that the days and hours are in different elements.

How should one go about marking it up and linking the day of the week to the hours that are corresponding?

The code is as follows:

<h2>Hours</h2>
<div id="hours">
<ul>
   <li>Mon-Wed</li>
   <li>Thursday</li>
   <li>Friday</li>
   <li>Saturday</li>
   <li>Sunday</li>
</ul>
<ul>
   <li>9:00 AM - 6:00 PM</li>
   <li>9:00 AM - 8:00 PM</li>
   <li>9:00 AM - 6:00 PM</li>
   <li>10:00 AM - 4:00 PM</li>
   <li>Closed</span></li>
</ul>
</div>

score 0 · Answer 1 · answered Aug 16 '15 at 15:39

This is the explanation from http://Schema.org/openingHours:

Days are specified using the following two-letter combinations: Mo, Tu, We, Th, Fr, Sa, Su.
Times are specified using 24:00 time. For example, 3pm is specified as 15:00.

Schema.org examples:

<time itemprop="openingHours" datetime="Tu,Th 16:00-20:00">Tuesdays and Thursdays 4-8pm</time>.

If a business is open 7 days a week, then it can be specified as:

<time itemprop="openingHours" datetime="Mo-Su">Monday through Sunday, all day</time>.

Remember that meta tags can be used for hidden data, while it isn't generally a great idea an exception would be for providing machine-readable dates if needed.

I would suggest something similar to this, so you can keep your layout the same:

<li><time itemprop="openingHours" datetime="Mo,We 09:00-18:00">Mon-Wed</time></li>
<li><time itemprop="openingHours" datetime="Th 09:00-20:00">Thursday</time></li>
<li><time itemprop="openingHours" datetime="Fr 09:00-18:00">Friday</time></li>

The lines containing times alone don't need markup because it's provided higher up, and Closed periods are not part of openingHours and can be left out.

Note that it’s [not valid to use the `time` element for this](http://stackoverflow.com/a/28089509/1591669). — unor, Aug 17 '15 at 12:04
do you have a reference for that? Schema.org shows an example using the `` tag, although I normally just use `` myself — Mousey, Aug 17 '15 at 17:27
My [linked answer](http://stackoverflow.com/a/28089509/1591669) contains a reference: "I reported this [issue in the Schema.org tracker](https://github.com/schemaorg/schemaorg/issues/143) […]" — unor, Aug 17 '15 at 19:48
thanks, I had missed that. I thought the example seemed... odd — Mousey, Aug 17 '15 at 20:13

score 0 · Answer 2 · edited May 23 '17 at 10:26

Using an ul element for this purpose is not correct (and it’s not accessible).

If you want to relate the days with the corresponding times, you could:

use a table
use a dl
use text, i.e., day and time next to each other (with elements for styling)

If your markup/content doesn’t allow to provide the content in a form which you need for Microdata, you could always use the meta element (which is allowed in the body if used for Microdata).

But you might want to consider using openingHoursSpecification instead of openingHours. It allows to markup dayOfWeek and opens/closes separately.

How to link hours element to days element for Schema.org's "openingHours" in Microdata?

2 Answers2