I have a element on my page that informs the user of the days an event is going on, the month and year and finally how many days are to go before the event. I was wondering if the following within the HTML5 specification is the correct HTML5 markup pattern for this data.
example of what the markup needs to produce
my markup (slightly different to the image above):
<section>
<div>London</div>
<time datetime="2013-02-20">20</time>
–
<time datetime="2013-02-21">21</time>
<time datetime="2013-02">Feburary 2013</time>
<div>24 days to go</div>
</section>
Any suggestions on correct markup?
I'm not sure whether a <section>-element is the right wrapper for this container. The specs on w3.org say:
A section, in this context, is a thematic grouping of content, typically with a heading.
In the example markup, you don't have a heading, which could be added, but I don't think, that the date itself "is a thematic grouping of content", it is more a meta information to some other content.
Regarding the <time>-elements another way to write this thingy could be:
<div>London</div>
<time datetime="P2D">20 - 21</time>
<time datetime="2013-02-20">Feburary 2013</time>
<div>24 days to go</div>
The first one describes a duration of two days, which the event will last. The second specifies the day the event starts. Without the tags it still reads "London 20 - 21 February 2013 24 days to go".
You can read more about it here on w3.org:
4.6.11 The time element
2.4.5.9 Durations
Related
I have been searching and I saw different ways to use the time tag. For instance:
Last update: <time itemprop="dateModified" datetime="2016-08-15">August 15, 2016</time>
<time itemprop="dateModified" datetime="2016-08-15">Last update: August 15, 2016</time>
I understand that I should use the datetime attribute in a standard way to help machines read it. No doubts about that. But all the information related to time should be inside the tags or only the dates?. In this example, Last update should be inside or outside the time tag?
Although the documentation does not address this question directly, the examples hold only the date related info (in a human readable format) inside the <time> tag.
Also, according to this blog post they point out that although you can put whatever you want inside the tags, it is more common just for it to be a textual human readable representation of what you've got in the datetime attribute.
It's probably a bit more common for the human-readable version to be just a textual representation of the datetime
Following the examples I would update your markup to:
<p>Last update: <time itemprop="dateModified" datetime="2016-08-15">August 15, 2016</time><p>
See the specification:
The time element represents its contents, along with a machine-readable form of those contents in the datetime attribute. The kind of content is limited to various kinds of dates, times, time-zone offsets, and durations, as described below.
The datetime attribute may be present. If present, its value must be a representation of the element's contents in a machine-readable format.
2016-08-15 is the machine readable expression of August 15, 2016. It does not express the information Last update:.
Only the human readable version of the time information should be inside the element.
You should be able to use the content of the element and the content of the datetime attribute interchangeably.
I want to use the <time> tag for the start and end dates of a tour but I can't see how best to code it.
For example the human readable format is "Sun March 6th to Sunday March 13th"
I could simply use two sets of time tags but iirc isn't it possible for the viewer to click a date and add an event directly to their calendar?? If so wouldn't that need to be within the same single <time> or am I not understanding it correctly?
Duration doesn't do what I want as it only shows the length of the tour not the two dates when it begins and ends and obviously it won't work for adding the event to the viewers calendar.
I would recommend using a mixture of the microdata Event schema and the time element.
For example:
<article itemscope itemtype="http://schema.org/Event">
<h3 itemprop="name">My Event</h3>
<time itemprop="startDate" datetime="2016-03-06">Sunday, March 6th</time>
<time itemprop="endDate" datetime="2016-03-13">Sunday, March 13th</time>
</article>
If you use this, to be valid, you also need to add a location (the description for which you can find in the link to the Event schema above). You can test the validity using Google's Structured Data Testing Tool.
I have a list of events, each of which has a start date and an end date and I would like to use the html5 <time> element to make the list semantically richer.
I have found that I can use the datetime attribute to provide a machine-readable time like so:
<time datetime="2015-02-21">my birthday</time>
I have also found that the attribute supports durations like so:
<time datetime="P2D">two days</time>
However, I haven't been able to find what is the correct way to combine the two in a single <time> element to, for example, display an event that begins on the 21st of February and lasts two days.
Can I simply use a date and a duration separated by a space:
<time datetime="2015-02-21 P2D">21.-23. February</time>
Or would the correct way be to use two <time> elements?
<div>
<time datetime="2015-02-21">21.</time>
-
<time datetime="2015-02-23">23.</time>
February
</div>
There does not appear to be a way to combine specific date strings or time strings with a duration string in a single <time> element. The spec suggests using two <time> elements instead:
Code Example:
The time element can be used to encode dates, for example in microformats. The following shows a hypothetical way of encoding an event using a variant on hCalendar that uses the time element:
<div class="vevent">
<a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
<span class="summary">Web 2.0 Conference</span>:
<time class="dtstart" datetime="2005-10-05">October 5</time> -
<time class="dtend" datetime="2005-10-07">7</time>,
at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>
which closely matches the example that you have.
do you want something like this?
<input type="date" min="2015-02-21" max="2015-02-23"/>
<input type="date" min="2015-02-21" max="2015-02-23"/>
February
however, it is not compatible with ie and firefox at presents. You'e better use a js dateSelector plug-in instead.
I am somehow confused how to properly markup the following example:
The course takes 2 days
from Sunday, 12.06.2014 9:00-18:00
to Monday, 13.06.2014 9:00-14:00
I came up with the following but i am uncertain if that is the correct proper way:
<p>The course takes <time datetime="P 2 D">2 days</time></p>
<p> from <time datetime="2014-06-12">Sunday, 12.06.2014 </time><time datetime="2014-06-12T9:00+1:00">9:00</time>-<time datetime="2014-06-12T18:00+1:00">18:00</time></p>
<p> to <time datetime="2014-06-13">Monday, 13.06.2014 </time><time datetime="2014-06-13T9:00+1:00">9:00</time>-<time datetime="2014-06-13T14:00+1:00">14:00</time></p>
The time element represents its contents, along with a machine-readable form of those contents in the datetime attribute. The kind of content is limited to various kinds of dates, times, time-zone offsets, and durations.
The time element
Semantically your markup is ok.
However, there are few issues with datetime attribute:
Remove whitespaces from duration string: P 2 D --> P2D.
An hour in time string and time-zone offset string must consist of 2 digits: 2014-06-12T9:00+1:00 --> 2014-06-12T09:00+01:00.
After fix:
<p>The course takes <time datetime="P2D">2 days</time></p>
<p> from <time datetime="2014-06-12">Sunday, 12.06.2014 </time><time datetime="2014-06-12T09:00+01:00">9:00</time>-<time datetime="2014-06-12T18:00+01:00">18:00</time></p>
<p> to <time datetime="2014-06-13">Monday, 13.06.2014 </time><time datetime="2014-06-13T09:00+01:00">9:00</time>-<time datetime="2014-06-13T14:00+01:00">14:00</time></p>
I'm supposed to mark up the opening hours of a company with HTML5 microdata.
After searching on Google and schema.org for a bit i wrote the following code:
<time itemprop="openingHours" datetime="Mo 13:00-17:30"><span class="day">Maandag:</span> <span class="hours">13:00-17:30</span></time>
<time itemprop="openingHours" datetime="Tu 09:00-17:30"><span class="day">Dinsdag:</span> <span class="hours">09:00-17:30</span></time>
<time itemprop="openingHours" datetime="We 09:00-17:30"><span class="day">Woensdag:</span> <span class="hours">09:00-17:30</span></time>
<time itemprop="openingHours" datetime="Th 09:00-17:30"><span class="day">Donderdag:</span> <span class="hours">09:00-17:30</span></time>
<time itemprop="openingHours" datetime="Fr 09:00-21:00"><span class="day">Vrijdag:</span> <span class="hours">09:00-21:00</span></time>
<time itemprop="openingHours" datetime="Sa 08:30-15:00"><span class="day">Zaterag:</span> <span class="hours">08:30-15:00</span></time>
When i check the website in with Google's structured data testing tool i see that the structured data is recognized correctly.
The problem is that one of the requirements of this assignment is that it conforms to W3C's HTML validator. For eacht time element i get the following error.
Bad value Mo 13:00-17:30 for attribute datetime on element time: The literal did not satisfy the time-datetime format.
I get why i get this error, what i don't get is how i can specify my opening-hours in a way that they are marked up with HTML5 Microdata and that they are also valid HTML according to the HTML5 validator.
Hope you guys can help me out on this one. :)
Maintainer of the W3C HTML Checker (aka validator) here. I wrote the code that does that check. The value Mo 13:00-17:30 in the question doesn’t conform to the rules in the HTML spec giving the allowed values of datetime.
The value Mo 13:00-17:30 seems to be trying to specify a special time range: A day of the week plus a time range.
But the HTML spec doesn’t allow the value to be in that format. The closest format that it does allow is a ISO8601-format duration string.
A duration string that would be valid: datetime="4h 30m".
That’s about as close as you can get, because in the HTML spec, the rules for specifying a duration are that it must be a single expression of a number of hours+minutes+seconds. So:
an duration expression that specifies a pair of times (as the question has) is not valid
as expression of a duration that specifies a day of the week is not valid
I used data instead of time - works for validator.w3.org as well as for www.google.com/webmasters/tools/richsnippets:
<data itemprop="openingHours" value="Mo-Su 07:00-22:00">7 days a week, 7 am to 22 pm</data>
Thanks to Hixie on freenode#whatwg.
If the datetime format is causing the validation to fail, you could place the hours of operations in the meta tag element:
<meta itemprop="openingHours" content="Mo,Tu 11..." />
<meta itemprop="openingHours" content="We,Th 12..." />
...
According to the specs, the meta element will be valid there if it has the itemprop attribute.