4

I followed the instructions on schema.org to add the business hours of a company in their website, however, the W3C's HTML validator does not like it >_< It's giving me the following error:

Bad value Mo-Fr 09:00-19:00 for attribute datetime on element time: The literal did not satisfy the time-datetime format.

Below is my HTML:

<div>
    <p>Office Hours:</p>
    <p><time itemprop="openingHours" datetime="Mo-Fr 09:00-19:00">Monday-Friday: 9:00 am to 7:00 pm</time></p>
    <p><time itemprop="openingHours" datetime="Sa 10:00-17:00">Saturdays: 10:00 am to 5:00 pm</time></p>
    <p><time itemprop="openingHours" datetime="Su 11:00-16:00">Sundays: 11:00 am to 4:00 pm</time></p>
</div>

What am I doing wrong?

Omar
  • 10,419
  • 21
  • 76
  • 106

1 Answers1

6

What you're doing wrong:

The HTML spec doesn't support the range of weekdays and hours you're trying to represent. Your markup is not strictly valid HTML, however you could say it is valid HTML + Schema.org (although there is no explicit standard for this).

The time element is for a specific date, time, and/or timezone data. It can also be used for a duration (the runtime of a movie, as a real-world example, which could look like 2h 11m 33s). There is no valid value outlined in the spec that supports a range of days and times.

The Semantics section of the HTML spec describes the usage of time and valid values for the datetime attribute. Here are a few examples of acceptable values:

Valid date string: 2011-11-18

Valid local date and time string: 2011-11-18T14:54

Valid week string: 2011-W47

Valid duration string: PT4H18M3S

Valid time-zone offset string: -08:00

Among many others, none of which are useful or appropriate for your specific use case.

What you can do:

You could try using <data> instead of <time>, such as:

<div itemscope itemtype="https://schema.org/LocalBusiness">
  <p>Office Hours:</p>
  <p><data itemprop="openingHours" value="Mo-Fr 09:00-19:00">Monday-Friday: 9:00 am to 7:00 pm</data></p>
  <p><data itemprop="openingHours" value="Sa 10:00-17:00">Saturdays: 10:00 am to 5:00 pm</data></p>
  <p><data itemprop="openingHours" value="Su 11:00-16:00">Sundays: 11:00 am to 4:00 pm</data></p>
</div>

Which will validate, however it's skirting the rules for time-based data (the spec wants you to use <time>) and you've now sacrificed semantics for superfluous validation.

Also note the itemscope and itemtype in the containing <div>.

My general opinion:

I would personally stick with the example that Schema.org outlines using <time> with the datetime attribute. But the above example in theory should work just fine.

This is a good illustration of why I try not to sweat over perfect validation. Validation is a useful debugging tool and quality check, and is important for teaching good markup practices. It's also important to know what valid HTML looks like and using the validator is useful to learn the "rules" of HTML — part of that being so that you know when it's acceptable to bend those rules to work for your specific use case.

Basically: don't sweat it. The benefit of using Schema.org outweighs the cost of these few lines of invalid markup.

Community
  • 1
  • 1
zep_fan
  • 786
  • 5
  • 13
  • @zep-fan How can I fix it to show the proper value or what changes in the html are required? – Omar Apr 06 '15 at 22:40
  • @zep-fan I still want to "sweat it" and have a properly validated markup WITH schema – Omar Apr 06 '15 at 22:56
  • @zep-fan what do you think of: `

    Office Hours:

    -

    ...`
     – Omar Apr 09 '15 at 02:01
  • @Omar That still won't validate. Please look at the first link I provided in my answer, it will list out every acceptable format that is a valid value for the `datetime` attribute -- weekdays are not acceptable. The reason why my code above validates is because I'm using the `value` attribute in a `` element, not `datetime`. You also need to include `itemprop` and `itemscope` in the containing `
    `. Use [this tool from Google](https://developers.google.com/structured-data/testing-tool/) to help you out with microdata implementation. Try my example, it validates and Google can read it.
     – zep_fan Apr 09 '15 at 03:04