- From: Ian Hickson via cvs-syncmail <cvsmail@w3.org>
- Date: Sat, 29 Oct 2011 05:43:16 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/spec
In directory hutz:/tmp/cvs-serv22687
Modified Files:
Overview.html
Log Message:
Drop <time> and replace it with <data>. Drop the Atom conversion section entirely. Convert a bunch of examples that used to use <time pubdate> to using schema.org, to show how to annotate publication dates and the like in a machine-processable way. (whatwg r6783)
Index: Overview.html
===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.5431
retrieving revision 1.5432
diff -u -d -r1.5431 -r1.5432
--- Overview.html 28 Oct 2011 23:12:04 -0000 1.5431
+++ Overview.html 29 Oct 2011 05:43:12 -0000 1.5432
@@ -320,7 +320,7 @@
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
- <h2 class="no-num no-toc" id="editor-s-draft-28-october-2011">Editor's Draft 28 October 2011</h2>
+ <h2 class="no-num no-toc" id="editor-s-draft-29-october-2011">Editor's Draft 29 October 2011</h2>
<dl><dt>Latest Published Version:</dt>
<dd><a href="http://www.w3.org/TR/html5/">http://www.w3.org/TR/html5/</a></dd>
<dt>Latest Editor's Draft:</dt>
@@ -466,7 +466,7 @@
Group</a> is the W3C working group responsible for this
specification's progress along the W3C Recommendation
track.
- This specification is the 28 October 2011 Editor's Draft.
+ This specification is the 29 October 2011 Editor's Draft.
</p><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>Work on this specification is also done at the <a href="http://www.whatwg.org/">WHATWG</a>. The W3C HTML working group
actively pursues convergence with the WHATWG, as required by the <a href="http://www.w3.org/2007/03/HTML-WG-charter">W3C HTML working
group charter</a>.</p><!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>This document was produced by a group operating under the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5
@@ -698,7 +698,7 @@
<li><a href="#the-q-element"><span class="secno">4.6.7 </span>The <code>q</code> element</a></li>
<li><a href="#the-dfn-element"><span class="secno">4.6.8 </span>The <code>dfn</code> element</a></li>
<li><a href="#the-abbr-element"><span class="secno">4.6.9 </span>The <code>abbr</code> element</a></li>
- <li><a href="#the-time-element"><span class="secno">4.6.10 </span>The <code>time</code> element</a></li>
+ <li><a href="#the-data-element"><span class="secno">4.6.10 </span>The <code>data</code> element</a></li>
<li><a href="#the-code-element"><span class="secno">4.6.11 </span>The <code>code</code> element</a></li>
<li><a href="#the-var-element"><span class="secno">4.6.12 </span>The <code>var</code> element</a></li>
<li><a href="#the-samp-element"><span class="secno">4.6.13 </span>The <code>samp</code> element</a></li>
@@ -1325,8 +1325,7 @@
<li><a href="#the-progress-element-0"><span class="secno">10.5.13 </span>The <code>progress</code> element</a></li>
<li><a href="#the-select-element-0"><span class="secno">10.5.14 </span>The <code>select</code> element</a></li>
<li><a href="#the-textarea-element-0"><span class="secno">10.5.15 </span>The <code>textarea</code> element</a></li>
- <li><a href="#the-keygen-element-0"><span class="secno">10.5.16 </span>The <code>keygen</code> element</a></li>
- <li><a href="#the-time-element-0"><span class="secno">10.5.17 </span>The <code>time</code> element</a></ol></li>
+ <li><a href="#the-keygen-element-0"><span class="secno">10.5.16 </span>The <code>keygen</code> element</a></ol></li>
<li><a href="#frames-and-framesets"><span class="secno">10.6 </span>Frames and framesets</a></li>
<li><a href="#interactive-media"><span class="secno">10.7 </span>Interactive media</a>
<ol>
@@ -9433,6 +9432,7 @@
<li><code><a href="#the-cite-element">cite</a></code></li>
<li><code><a href="#the-code-element">code</a></code></li>
<li><code><a href="#the-command-element">command</a></code></li>
+ <li><code><a href="#the-data-element">data</a></code></li>
<li><code><a href="#the-datalist-element">datalist</a></code></li>
<li><code><a href="#the-del-element">del</a></code></li>
<li><code><a href="#the-details-element">details</a></code></li>
@@ -9491,7 +9491,6 @@
<li><code><a href="#svg">svg</a></code></li>
<li><code><a href="#the-table-element">table</a></code></li>
<li><code><a href="#the-textarea-element">textarea</a></code></li>
- <li><code><a href="#the-time-element">time</a></code></li>
<li><code><a href="#the-u-element">u</a></code></li>
<li><code><a href="#the-ul-element">ul</a></code></li>
<li><code><a href="#the-var-element">var</a></code></li>
@@ -9531,6 +9530,7 @@
<li><code><a href="#the-cite-element">cite</a></code></li>
<li><code><a href="#the-code-element">code</a></code></li>
<li><code><a href="#the-command-element">command</a></code></li>
+ <li><code><a href="#the-data-element">data</a></code></li>
<li><code><a href="#the-datalist-element">datalist</a></code></li>
<li><code><a href="#the-del-element">del</a></code> (if it contains only <a href="#phrasing-content">phrasing content</a>)</li>
<li><code><a href="#the-dfn-element">dfn</a></code></li>
@@ -9565,7 +9565,6 @@
<li><code><a href="#the-sub-and-sup-elements">sup</a></code></li>
<li><code><a href="#svg">svg</a></code></li>
<li><code><a href="#the-textarea-element">textarea</a></code></li>
- <li><code><a href="#the-time-element">time</a></code></li>
<li><code><a href="#the-u-element">u</a></code></li>
<li><code><a href="#the-var-element">var</a></code></li>
<li><code><a href="#the-video-element">video</a></code></li>
@@ -9727,6 +9726,7 @@
<li><code><a href="#the-canvas-element">canvas</a></code></li>
<li><code><a href="#the-cite-element">cite</a></code></li>
<li><code><a href="#the-code-element">code</a></code></li>
+ <li><code><a href="#the-data-element">data</a></code></li>
<li><code><a href="#the-details-element">details</a></code></li>
<li><code><a href="#the-dfn-element">dfn</a></code></li>
<li><code><a href="#the-div-element">div</a></code></li>
@@ -9779,7 +9779,6 @@
<li><code><a href="#svg">svg</a></code></li>
<li><code><a href="#the-table-element">table</a></code></li>
<li><code><a href="#the-textarea-element">textarea</a></code></li>
- <li><code><a href="#the-time-element">time</a></code></li>
<li><code><a href="#the-u-element">u</a></code></li>
<li><code><a href="#the-ul-element">ul</a></code> (if the element's children include at least one <code><a href="#the-li-element">li</a></code> element)</li>
<li><code><a href="#the-var-element">var</a></code></li>
@@ -14035,13 +14034,13 @@
links are present, but only one of those places is considered a
navigation section.</p>
- <pre><body>
+ <pre><body itemscope itemtype="http://schema.org/Blog">
<header>
<h1>Wake up sheeple!</h1>
<p><a href="news.html">News</a> -
<a href="blog.html">Blog</a> -
<a href="forums.html">Forums</a></p>
- <p>Last Modified: <time>2009-04-01</time></p>
+ <p>Last Modified: <data itemprop="dateModified">2009-04-01</data></p>
<nav>
<h1>Navigation</h1>
<ul>
@@ -14052,22 +14051,25 @@
</nav>
</header>
<div>
- <article>
+ <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
<header>
- <h1>My Day at the Beach</h1>
+ <h1 itemprop="headline">My Day at the Beach</h1>
</header>
- <div>
+ <div itemprop="articleBody">
<p>Today I went to the beach and had a lot of fun.</p>
<em>...more content...</em>
</div>
<footer>
- <p>Posted <time pubdate="" datetime="2009-10-10T14:36-08:00">Thursday</time>.</p>
+ <p>Posted <data itemprop="datePublished" value="2009-10-10">Thursday</data>.</p>
</footer>
</article>
<em>...more blog posts...</em>
</div>
<footer>
- <p>Copyright © 2006 The Example Company</p>
+ <p>Copyright ©
+ <span itemprop="copyrightYear">2010</span>
+ <span itemprop="copyrightHolder">The Example Company</span>
+ </p>
<p><a href="about.html">About</a> -
<a href="policy.html">Privacy Policy</a> -
<a href="contact.html">Contact Us</a></p>
@@ -14078,6 +14080,10 @@
contents of the page other than the header and footer, and all the
contents of the blog entry other than its header and footer.</p>
+ <p>You can also see microdata annotations in the above example that
+ use the schema.org vocabulary to provide the publication date and
+ other metadata about the blog post.</p>
+
</div><div class="example">
<p>In the following example, there are two <code><a href="#the-nav-element">nav</a></code>
@@ -14179,49 +14185,57 @@
similar in purpose to the <code title="">entry</code> element in
Atom. <a href="#refsATOM">[ATOM]</a>
- <p class="note">The <code><a href="#the-time-element">time</a></code> element's <code title="attr-time-pubdate"><a href="#attr-time-pubdate">pubdate</a></code> attribute can be used to
+ <p class="note">The schema.org microdata vocabulary can be used to
provide the publication date for an <code><a href="#the-article-element">article</a></code>
- element.<div class="example" id="article-example">
+ element, using one of the CreativeWork subtypes.<div class="example" id="article-example">
<p>This example shows a blog post using the <code><a href="#the-article-element">article</a></code>
- element:</p>
+ element, with some schema.org annotations:</p>
- <pre><article>
+ <pre><article itemscope itemtype="http://schema.org/BlogPosting">
<header>
- <h1>The Very First Rule of Life</h1>
- <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
- </header>
+ <h1 itemprop="headline">The Very First Rule of Life</h1>
+ <p><data itemprop="datePublished" value="2009-10-09">3 days ago</data></p>
+ <link itemprop="url" href="?comments=0">
+ </header>[
<p>If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</p>
<p><em>...</em></p>
<footer>
- <a href="?comments=1">Show comments...</a>
+ <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
</footer>
</article></pre>
<p>Here is that same blog post, but showing some of the comments:</p>
- <pre><article>
+ <pre><article itemscope itemtype="http://schema.org/BlogPosting">
<header>
- <h1>The Very First Rule of Life</h1>
- <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
+ <h1 itemprop="headline">The Very First Rule of Life</h1>
+ <p><data itemprop="datePublished" value="2009-10-09">3 days ago</data></p>
+ <link itemprop="url" href="?comments=0">
</header>
<p>If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</p>
<p><em>...</em></p>
<section>
<h1>Comments</h1>
- <article>
+ <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c1">
+ <link itemprop="url" href="#c1">
<footer>
- <p>Posted by: George Washington</p>
- <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
+ <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
+ <span itemprop="name">George Washington</span>
+ </span></p>
+ <p><data itemprop="commentTime" value="2009-10-10">15 minutes ago</data></p>
</footer>
<p>Yeah! Especially when talking about your lobbyist friends!</p>
</article>
- <article>
+ <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c2">
+ <link itemprop="url" href="#c2">
<footer>
- <p>Posted by: George Hammond</p>
- <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
+ <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
+ <span itemprop="name">George Hammond</span>
+ </span></p>
+ <p><data itemprop="commentTime" value="2009-10-10">5 minutes ago</data></p>
</footer>
<p>Hey, you have the same first name as me.</p>
</article>
@@ -14615,7 +14629,7 @@
<P><A HREF="/fm/015.ogv">Download video</A>.</P>
</VIDEO>
<FOOTER> <!-- footer for article -->
- <P>Published <TIME PUBDATE DATETIME="2009-10-21T18:26-07:00"></TIME></P>
+ <P>Published <DATA VALUE="2009-10-21T18:26-07:00">on 2009/10/21 at 6:26pm</DATA></P>
</FOOTER>
</ARTICLE>
<ARTICLE>
@@ -14624,7 +14638,7 @@
<P>It is fun to see them pull some coal cars because they look so
dwarfed in comparison.</P>
<FOOTER> <!-- footer for article -->
- <P>Published <TIME PUBDATE DATETIME="2009-09-15T14:54-07:00"></TIME></P>
+ <P>Published <DATA VALUE="2009-09-15T14:54-07:00">on 2009/09/15 at 2:54pm</DATA></P>
</FOOTER>
</ARTICLE>
<FOOTER> <!-- site wide footer -->
@@ -16953,93 +16967,55 @@
cause other <code><a href="#the-abbr-element">abbr</a></code> elements in the same document with the
same contents but without a <code title="attr-title"><a href="#the-title-attribute">title</a></code>
attribute to behave as if they had the same expansion. Every
- <code><a href="#the-abbr-element">abbr</a></code> element is independent.<h4 id="the-time-element"><span class="secno">4.6.10 </span>The <dfn><code>time</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
+ <code><a href="#the-abbr-element">abbr</a></code> element is independent.<h4 id="the-data-element"><span class="secno">4.6.10 </span>The <dfn><code>data</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
<dd><a href="#flow-content">Flow content</a>.</dd>
<dd><a href="#phrasing-content">Phrasing content</a>.</dd>
<dd><a href="#palpable-content">Palpable content</a>.</dd>
<dt>Contexts in which this element can be used:</dt>
<dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
<dt>Content model:</dt>
- <dd><a href="#phrasing-content">Phrasing content</a>, but there must be no <code><a href="#the-time-element">time</a></code> element descendants.</dd>
+ <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
<dt>Content attributes:</dt>
<dd><a href="#global-attributes">Global attributes</a></dd>
- <dd><code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code></dd>
- <dd><code title="attr-time-pubdate"><a href="#attr-time-pubdate">pubdate</a></code></dd>
+ <dd><code title="attr-data-value"><a href="#attr-data-value">value</a></code></dd>
<dt>DOM interface:</dt>
<dd>
-<pre class="idl">interface <dfn id="htmltimeelement">HTMLTimeElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
- attribute DOMString <a href="#dom-time-datetime" title="dom-time-datetime">dateTime</a>;
- attribute boolean <a href="#dom-time-pubdate" title="dom-time-pubDate">pubDate</a>;
- readonly attribute <span>Date</span>? <a href="#dom-time-valueasdate" title="dom-time-valueAsDate">valueAsDate</a>;
+<pre class="idl">interface <dfn id="htmldataelement">HTMLDataElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
+ attribute DOMString <a href="#dom-data-value" title="dom-data-value">value</a>;
};</pre>
</dd>
- </dl><p>The <code><a href="#the-time-element">time</a></code> element <a href="#represents">represents</a> either a
- time on a 24 hour clock, or a precise date in the proleptic
- Gregorian calendar, optionally with a time and a time-zone
- offset. <a href="#refsGREGORIAN">[GREGORIAN]</a><p>This element is intended as a way to encode modern dates and
- times in a machine-readable way so that, for example, user agents
- can offer to add birthday reminders or scheduled events to the
- user's calendar.</p><div class="note">
-
- <p>The <code><a href="#the-time-element">time</a></code> element is not intended for encoding times
- for which a precise date or time cannot be established. For
- example, it would be inappropriate for encoding times like "one
- millisecond after the big bang", "the early part of the Jurassic
- period", or "a winter around 250 BCE".</p>
-
- <p>For dates before the introduction of the Gregorian calendar,
- authors are encouraged to not use the <code><a href="#the-time-element">time</a></code> element, or
- else to be very careful about converting dates and times from the
- period to the Gregorian calendar. This is complicated by the manner
- in which the Gregorian calendar was phased in, which occurred at
- different times in different countries, ranging from partway
- through the 16th century all the way to early in the 20th.</p>
-
- </div><p>The <dfn id="attr-time-pubdate" title="attr-time-pubdate"><code>pubdate</code></dfn>
- attribute is a <a href="#boolean-attribute">boolean attribute</a>. If specified, it
- indicates that the date and time given by the element is the
- publication date and time of the nearest ancestor
- <code><a href="#the-article-element">article</a></code> element, or, if the element has no ancestor
- <code><a href="#the-article-element">article</a></code> element, of the document as a whole. If the
- element has a <code title="attr-time-pubdate"><a href="#attr-time-pubdate">pubdate</a></code>
- attribute specified, then the element <dfn id="needs-a-date">needs a date</dfn>. For
- each <code><a href="#the-article-element">article</a></code> element, there must be no more than one
- <code><a href="#the-time-element">time</a></code> element with a <code title="attr-time-pubdate"><a href="#attr-time-pubdate">pubdate</a></code> attribute whose nearest
- ancestor is that <code><a href="#the-article-element">article</a></code> element. Furthermore, for each
- <code><a href="#document">Document</a></code>, there must be no more than one
- <code><a href="#the-time-element">time</a></code> element with a <code title="attr-time-pubdate"><a href="#attr-time-pubdate">pubdate</a></code> attribute that does not
- have an ancestor <code><a href="#the-article-element">article</a></code> element.<p>The <dfn id="attr-time-datetime" title="attr-time-datetime"><code>datetime</code></dfn>
- attribute, if present, gives the date or time being
- specified. Otherwise, the date or time is given by the element's
- contents.<p>If the element <i><a href="#needs-a-date">needs a date</a></i>, and the <code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code> attribute is present,
- then the attribute's value must be a <a href="#valid-date-string-with-optional-time">valid date string with
- optional time</a>.<p>If the element <i><a href="#needs-a-date">needs a date</a></i>, but the <code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code> attribute is not present,
- then the element's <code><a href="#textcontent">textContent</a></code> must be a <a href="#valid-date-string-in-content-with-optional-time">valid
- date string in content with optional time</a>.<p>If the element does not <i title="needs a date"><a href="#needs-a-date">need a date</a></i>,
- and the <code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code> attribute
- is present, then the attribute's value must be a <a href="#valid-date-or-time-string">valid date or
- time string</a>.<p>If the element does not <i title="needs a date"><a href="#needs-a-date">need a date</a></i>,
- but the <code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code> attribute
- is not present, then the element's <code><a href="#textcontent">textContent</a></code> must be
- a <a href="#valid-date-or-time-string-in-content">valid date or time string in content</a>.<p>The date, if any, must be expressed using the Gregorian
- calendar.<div class="impl">
+ </dl><p>The <code><a href="#the-data-element">data</a></code> element <a href="#represents">represents</a> its
+ contents, along with a machine-readable form of those contents in
+ the <code title="attr-data-value"><a href="#attr-data-value">value</a></code> attribute.<p>The <dfn id="attr-data-value" title="attr-data-value"><code>value</code></dfn>
+ attribute must be present. Its value must be a representation of the
+ element's contents in a machine-readable format.<p>The element can be used for several purposes.<p>When combined with Microformats or the <a href="#microdata">microdata attributes</a> defined in this
+ specification, the element serves to provide both a machine-readable
+ value for the purposes of data procesors, and a human-readable value
+ for the purposes of rendering in a Web browser. In this case, the
+ format to be used in the <code title="attr-data-value"><a href="#attr-data-value">value</a></code>
+ attribute is determined by the Microformat or microdata
+ vocabulary in use.<p>The element can also, however, be used in conjunction with
+ scripts in the page, for when a script has store a literal value
+ alongside a human-readable value. In such cases, the format to be
+ used depends only on the needs of the script. (The <code title="attr-data-*"><a href="#attr-data">data-*</a></code> attributes can also be useful in
+ such situations.)<div class="impl">
- <p>If the <code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code> attribute
- is present, the user agent should convey the attribute's value to
- the user when rendering the element.</p>
+ <p>The <dfn id="dom-data-value" title="dom-data-value"><code>value</code></dfn> IDL
+ attribute must <a href="#reflect">reflect</a> the content attribute of the
+ same name.</p>
</div><div class="example">
- <p>The <code><a href="#the-time-element">time</a></code> element can be used to encode dates, for
+ <p>The <code><a href="#the-data-element">data</a></code> 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
- <code><a href="#the-time-element">time</a></code> element:</p>
+ <code><a href="#the-data-element">data</a></code> element:</p>
<pre><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="2007-10-05">October 5</time> -
- <time class="dtend" datetime="2007-10-20">19</time>,
+ <data class="dtstart" value="2007-10-05">October 5</data> -
+ <data class="dtend" value="2007-10-20">19</data>,
at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div></pre>
@@ -17049,146 +17025,48 @@
</div><div class="example">
- <p>The <code><a href="#the-time-element">time</a></code> element is not necessary for encoding
- dates or times. In the following snippet, the time is encoded using
- <code><a href="#the-time-element">time</a></code>, so that it can be restyled (e.g. using XBL2) to
- match local conventions, while the year is not marked up at all,
- since marking it up would not be particularly useful, and doing so
- is thus not allowed.</p>
-
- <pre><p>I usually have a snack at <time>16:00</time>.</p>
-<p>I've liked model trains since at least 1983.</p></pre>
-
- <p>Using a styling technology that supports restyling times, the
- first paragraph from the above snippet could be rendered as follows:</p>
-
- <blockquote><p>I usually have a snack at 4pm.</blockquote>
-
- <p>Or it could be rendered as follows:</p>
-
- <blockquote><p>I usually have a snack at 16h00.</blockquote>
-
- </div><div class="impl">
-
- <p>The <dfn id="dom-time-datetime" title="dom-time-datetime"><code>dateTime</code></dfn> IDL
- attribute must <a href="#reflect">reflect</a> the <code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code> content attribute.</p>
-
- <p>The <dfn id="dom-time-pubdate" title="dom-time-pubDate"><code>pubDate</code></dfn> IDL
- attribute must <a href="#reflect">reflect</a> the <code title="attr-time-pubdate"><a href="#attr-time-pubdate">pubdate</a></code> content attribute.</p>
-
- <p>User agents, to obtain the <dfn id="concept-time-date" title="concept-time-date">date</dfn>, <dfn id="concept-time-time" title="concept-time-time">time</dfn>, and <dfn id="concept-time-timezone" title="concept-time-timezone">time-zone offset</dfn> represented by
- a <code><a href="#the-time-element">time</a></code> element, must follow these steps:</p>
-
- <ol><li>If the <code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code>
- attribute is present, then use the rules to <a href="#parse-a-date-or-time-string">parse a date or
- time string</a> with the flag <i>in attribute</i> from the value
- of that attribute, and let the result be <var title="">result</var>.</li>
-
- <li>Otherwise, use the rules to <a href="#parse-a-date-or-time-string">parse a date or time
- string</a> with the flag <i>in content</i> from the element's
- <code><a href="#textcontent">textContent</a></code>, and let the result be <var title="">result</var>.</li>
-
- <li>If <var title="">result</var> is empty (because the parsing
- failed), then the <a href="#concept-time-date" title="concept-time-date">date</a> is
- unknown, the <a href="#concept-time-time" title="concept-time-time">time</a> is
- unknown, and the <a href="#concept-time-timezone" title="concept-time-timezone">time-zone
- offset</a> is unknown.</li>
-
- <li>Otherwise: if <var title="">result</var> contains a date, then
- that is the <a href="#concept-time-date" title="concept-time-date">date</a>; if <var title="">result</var> contains a time, then that is the <a href="#concept-time-time" title="concept-time-time">time</a>; and if <var title="">result</var> contains a time-zone offset, then the
- time-zone offset is the element's <a href="#concept-time-timezone" title="concept-time-timezone">time-zone offset</a>. (A time-zone
- offset can only be present if both a date and a time are also
- present.)</li>
-
- </ol></div><dl class="domintro"><dt><var title="">time</var> . <code title="dom-time-valueAsDate"><a href="#dom-time-valueasdate">valueAsDate</a></code></dt>
-
- <dd>
-
- <p>Returns a <code>Date</code> object representing the specified date and time.</p>
-
- </dd>
-
- </dl><div class="impl">
-
- <p>The <dfn id="dom-time-valueasdate" title="dom-time-valueAsDate"><code>valueAsDate</code></dfn> IDL
- attribute must return either null or a new <code>Date</code> object
- initialized to the relevant value as defined by the following
- list:</p>
-
- <dl><dt>If the <a href="#concept-time-date" title="concept-time-date">date</a> is known but
- the <a href="#concept-time-time" title="concept-time-time">time</a> is not</dt>
-
- <dd>The time corresponding to midnight UTC (i.e. the first second)
- of the given <a href="#concept-time-date" title="concept-time-date">date</a>.</dd>
-
- <dt>If the <a href="#concept-time-time" title="concept-time-time">time</a> is known but
- the <a href="#concept-time-date" title="concept-time-date">date</a> is not</dt>
-
- <dd>The time corresponding to the given <a href="#concept-time-time" title="concept-time-time">time</a> of 1970-01-01, with the time
- zone UTC.</dd>
-
- <dt>If both the <a href="#concept-time-date" title="concept-time-date">date</a> and the
- <a href="#concept-time-time" title="concept-time-time">time</a> are known</dt>
-
- <dd>The time corresponding to the <a href="#concept-time-date" title="concept-time-date">date</a> and <a href="#concept-time-time" title="concept-time-time">time</a>, with the given <a href="#concept-time-timezone" title="concept-time-timezone">time-zone offset</a>.</dd>
-
- <dt>If neither the <a href="#concept-time-date" title="concept-time-date">date</a> nor
- the <a href="#concept-time-time" title="concept-time-time">time</a> are known</dt>
+ <p>In this example, an article's publication date is marked up
+ using <code><a href="#the-data-element">data</a></code> and the schema.org microdata
+ vocabulary:</p>
- <dd>The null value.</dd>
+ <pre><article itemscope itemtype="http://schema.org/BlogPosting">
+ <h1 itemprop="headline">Small tasks</h1>
+ <footer>Published <data itemprop="datePublished" value="2009-08-30">yesterday</data>.</footer>
+ <p itemprop="articleBody">I put a bike bell on his bike.</p>
+</article></pre>
- </dl><p>When a <code>Date</code> object is to be returned, a new one must
- be constructed.</p>
</div><div class="example">
- <p>In the following snippet:</p>
-
- <pre><p>Our first date was <time datetime="2006-09-23">a Saturday</time>.</p></pre>
-
- <p>...the <code><a href="#the-time-element">time</a></code> element's <code title="dom-time-valueAsDate"><a href="#dom-time-valueasdate">valueAsDate</a></code> attribute would
- have the value 1,158,969,600,000ms.</p>
+ <p>In the following snippet, the <code><a href="#the-data-element">data</a></code> element is used
+ to encode a date in the ISO8601 format, for later processing by a
+ script:</p>
- </div><div class="example">
+ <pre><p>Our first date was <data value="2006-09-23">a Saturday</data>.</p></pre>
- <p>In the following snippet:</p>
+ <p>In this second snippet, the value includes a time:</p>
- <pre><p>Many people get up at <time>08:00</time>.</p></pre>
+ <pre><p>We stopped talking at <data value="2006-09-24T05:00-07:00">5am the next morning</data>.</p></pre>
- <p>...the <code><a href="#the-time-element">time</a></code> element's <code title="dom-time-valueAsDate"><a href="#dom-time-valueasdate">valueAsDate</a></code> attribute would
- have the value 28,800,000ms.</p>
+ <p>A script loaded by the page (and thus privy to the page's
+ internal convention of marking up dates and times using the
+ <code><a href="#the-data-element">data</a></code> element) could scan through the page and look at
+ all the <code><a href="#the-data-element">data</a></code> elements therein to create an index of
+ dates and times.</p>
</div><div class="example">
- <p>In this example, an article's publication date is marked up
- using <code><a href="#the-time-element">time</a></code>:</p>
-
- <pre><article>
- <h1>Small tasks</h1>
- <footer>Published <time pubdate>2009-08-30</time>.</footer>
- <p>I put a bike bell on his bike.</p>
-</article></pre>
-
- <p>Here is another way that could be marked up. In this example,
- legacy user agents would say "today", while newer user agents would
- render the time in a locale-specific manner based on the value of
- the attribute.</p>
-
- <pre><article>
- <h1>Small tasks</h1>
- <footer>Published <time pubdate datetime="2009-08-30">today</time>.</footer>
- <p>I put a bike bell on his bike.</p>
-</article></pre>
-
- <p>Here is the same thing but with the time included only. Because
- the element is empty, legacy user agents will not show anything
- useful; user agents that implement this specification, on the other
- hand, would show the date and time in a locale-specific manner.</p>
+ <p>Here, a short table has its numeric values encoded using
+ <code><a href="#the-data-element">data</a></code> so that a script can provide a sorting mechanism
+ on each column, despite the numbers being presented in textual
+ form in one column and in a decomposed form in another.</p>
- <pre><article>
- <h1>Small tasks</h1>
- <footer>Published <time pubdate datetime="2009-08-30T07:13Z"></time>.</footer>
- <p>I put a bike bell on his bike.</p>
-</article></pre>
+ <pre><table class="sortable"> <!-- class used by script to find tables to which to add sorting controls -->
+ <thead> <tr> <th> Game <th> Corporations <th> Map Size
+ <tbody>
+ <tr> <td> 1830 <td> <data value="8">Eight</data> <td> <data value="93">19+74 hexes (93 total)
+ <tr> <td> 1856 <td> <data value="11">Eleven</data> <td> <data value="99">12+87 hexes (99 total)
+ <tr> <td> 1870 <td> <data value="10">Ten</data> <td> <data value="149">4+145 hexes (149 total)
+</table></pre>
</div><h4 id="the-code-element"><span class="secno">4.6.11 </span>The <dfn><code>code</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
<dd><a href="#flow-content">Flow content</a>.</dd>
@@ -18064,9 +17942,9 @@
<td>Abbreviations
<td><pre class="example">Organic food in Ireland is certified by the <strong><abbr title="Irish Organic Farmers and Growers Association">IOFGA</abbr></strong>.</pre>
- <tr><td><code><a href="#the-time-element">time</a></code>
- <td>Date and/or time
- <td><pre class="example">Published <strong><time>2009-10-21</time></strong>.</pre>
+ <tr><td><code><a href="#the-data-element">data</a></code>
+ <td>Machine-readable equivalent
+ <td><pre class="example">Available starting today! <strong><data value="UPC:022014640201">North Coast Organic Apple Cider</data></strong></pre>
<tr><td><code><a href="#the-code-element">code</a></code>
<td>Computer code
@@ -19895,19 +19773,18 @@
out in September, and we have articles about getting food, and about
getting in boxes, it's going to be great!</p>
<footer>
- <p>Written by <a href="/users/cap">cap</a>.
- <time pubdate>2009-08-21T23:32Z</time></p>
+ <p>Written by <a href="/users/cap">cap</a>, 1 hour ago.
</footer>
<article>
- <footer> At <time pubdate>2009-08-21T23:35Z</time>, <a href="/users/ch">ch</a> writes: </footer>
+ <footer> Thirteen minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
<iframe seamless sandbox srcdoc="<p>did you get a cover picture yet?"></iframe>
</article>
<article>
- <footer> At <time pubdate>2009-08-21T23:44Z</time>, <a href="/users/cap">cap</a> writes: </footer>
+ <footer> Nine minutes ago, <a href="/users/cap">cap</a> wrote: </footer>
<iframe seamless sandbox srcdoc="<p>Yeah, you can see it <a href=&quot;/gallery?mode=cover&amp;amp;page=1&quot;>in my gallery</a>."></iframe>
</article>
<article>
- <footer> At <time pubdate>2009-08-21T23:58Z</time>, <a href="/users/ch">ch</a> writes: </footer>
+ <footer> Five minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
<iframe seamless sandbox srcdoc="<p>hey that's earl's table.
<p>you should get earl&amp;amp;me on the next cover."></iframe>
</article></pre>
@@ -34068,6 +33945,30 @@
string</a> expressed in UTC that represents the <a href="#concept-datetime" title="concept-datetime">global date and time</a> that is
represented by <var title="">input</var>.</p>
+ </div><div class="note" id="only-contemporary-times">
+
+ <p>The <a href="#date-and-time-state" title="attr-input-type-datetime">Date and Time</a>
+ state (and other date- and time-related states described in
+ subsequent sections) is not intended for the entry of values for
+ which a precise date and time relative to the contemporary calendar
+ cannot be established. For example, it would be inappropriate for
+ the entry of times like "one millisecond after the big bang", "the
+ early part of the Jurassic period", or "a winter around 250
+ BCE".</p>
+
+ <p>For the input of dates before the introduction of the Gregorian
+ calendar, authors are encouraged to not use the <a href="#date-and-time-state" title="attr-input-type-datetime">Date and Time</a> state (and
+ the other date- and time-related states described in subsequent
+ sections), as user agents are not required to support converting
+ dates and times from earlier periods to the Gregorian calendar, and
+ asking users to do so manually puts an undue burden on users. (This
+ is complicated by the manner in which the Gregorian calendar was
+ phased in, which occurred at different times in different
+ countries, ranging from partway through the 16th century all the
+ way to early in the 20th.) Instead, authors are encouraged to
+ provide fine-grained input controls using the <code><a href="#the-select-element">select</a></code>
+ element and <code><a href="#the-input-element">input</a></code> elements with the <a href="#number-state" title="attr-input-type-number">Number</a> state.</p>
+
</div><div class="bookkeeping">
<p>The following common <code><a href="#the-input-element">input</a></code> element content
@@ -34216,7 +34117,9 @@
time represented by <var title="">input</var> in the UTC
time zone.</p>
- </div><div class="bookkeeping">
+ </div><p class="note">See <a href="#only-contemporary-times">the note on
+ historical dates</a> in the <a href="#date-and-time-state" title="attr-input-type-datetime">Date and Time</a> state
+ section.<div class="bookkeeping">
<p>The following common <code><a href="#the-input-element">input</a></code> element content
attributes, IDL attributes, and methods apply to the element:
@@ -34711,7 +34614,9 @@
string</a> that represents the date and time that is <var title="">input</var> milliseconds after midnight on the morning of
1970-01-01 (the time represented by the value "<code title="">1970-01-01T00:00:00.0</code>").</p>
- </div><div class="bookkeeping">
+ </div><p class="note">See <a href="#only-contemporary-times">the note on
+ historical dates</a> in the <a href="#date-and-time-state" title="attr-input-type-datetime">Date and Time</a> state
+ section.<div class="bookkeeping">
<p>The following common <code><a href="#the-input-element">input</a></code> element content
attributes, IDL attributes, and methods apply to the element:
@@ -43012,7 +42917,7 @@
<strong> <article>
<header>
<h1>My toys</h1>
- <p>Published <time pubdate datetime="2010-08-04">August 4th</time></p>
+ <p>Published August 4th</p>
</header>
<p>I really like my chained book and my telephone. I'm not such a
fan of my big ball.</p>
@@ -43185,13 +43090,14 @@
</div><div class="example">
<p>The following extract shows how an IM conversation log could be
- marked up.</p>
+ marked up, using the <code><a href="#the-data-element">data</a></code> element to provide Unix
+ timestamps for each line.</p>
- <pre><p> <time>14:22</time> <b>egof</b> I'm not that nerdy, I've only seen 30% of the star trek episodes
-<p> <time>14:23</time> <b>kaj</b> if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
-<p> <time>14:23</time> <b>egof</b> it's unarguably
-<p> <time>14:23</time> <i>* kaj blinks</i>
-<p> <time>14:24</time> <b>kaj</b> you are not helping your case</pre>
+ <pre><p> <data value="1319898155">14:22</data> <b>egof</b> I'm not that nerdy, I've only seen 30% of the star trek episodes
+<p> <data value="1319898192">14:23</data> <b>kaj</b> if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
+<p> <data value="1319898200">14:23</data> <b>egof</b> it's unarguably
+<p> <data value="1319898228">14:23</data> <i>* kaj blinks</i>
+<p> <data value="1319898260">14:24</data> <b>kaj</b> you are not helping your case</pre>
</div><div class="example">
@@ -67235,22 +67141,6 @@
</div><div class="impl">
- <h4 id="the-time-element-0"><span class="secno">10.5.17 </span>The <code><a href="#the-time-element">time</a></code> element</h4>
-
- <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
-
-time[datetime] { binding: <i title="">time</i>; }</pre>
-
- <p>When the <i title="">time</i> binding applies to a
- <code><a href="#the-time-element">time</a></code> element, the element is expected to render as if
- it contained text conveying the <a href="#concept-time-date" title="concept-time-date">date</a> (if known), <a href="#concept-time-time" title="concept-time-time">time</a> (if known), and <a href="#concept-time-timezone" title="concept-time-timezone">time-zone offset</a> (if known)
- represented by the element, in the fashion most convenient for the
- user.</p>
-
-
-
- </div><div class="impl">
-
<h3 id="frames-and-framesets"><span class="secno">10.6 </span>Frames and framesets</h3>
<p>When an <code><a href="#the-html-element">html</a></code> element's <a href="#the-body-element-0" title="the body
@@ -69818,6 +69708,15 @@
<code title="attr-command-checked"><a href="#attr-command-checked">checked</a></code>;
<code title="attr-command-radiogroup"><a href="#attr-command-radiogroup">radiogroup</a></code></td>
<td><code><a href="#htmlcommandelement">HTMLCommandElement</a></code></td>
+ <tr><th><code><a href="#the-data-element">data</a></code></th>
+ <td>Machine-readable equivalent</td>
+ <td><a href="#flow-content" title="Flow content">flow</a>;
+ <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
+ <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
+ <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
+ <td><a href="#global-attributes" title="global attributes">globals</a>;
+ <code title="attr-data-value"><a href="#attr-data-value">value</a></code></td>
+ <td><code><a href="#htmldataelement">HTMLDataElement</a></code></td>
<tr><th><code><a href="#the-datalist-element">datalist</a></code></th>
<td>Container for options for <a href="#attr-input-list" title="attr-input-list">combo box control</a></td>
<td><a href="#flow-content" title="Flow content">flow</a>;
@@ -70601,16 +70500,6 @@
<td><code><a href="#the-tr-element">tr</a></code></td>
<td><a href="#global-attributes" title="global attributes">globals</a></td>
<td><code><a href="#htmltablesectionelement">HTMLTableSectionElement</a></code></td>
- <tr><th><code><a href="#the-time-element">time</a></code></th>
- <td>Date and/or time</td>
- <td><a href="#flow-content" title="Flow content">flow</a>;
- <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
- <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
- <td><a href="#phrasing-content" title="Phrasing content">phrasing</a>*</td>
- <td><a href="#global-attributes" title="global attributes">globals</a>;
- <code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code>;
- <code title="attr-time-pubdate"><a href="#attr-time-pubdate">pubdate</a></code></td>
- <td><code><a href="#htmltimeelement">HTMLTimeElement</a></code></td>
<tr><th><code><a href="#the-title-element">title</a></code></th>
<td>Document title</td>
<td><a href="#metadata-content" title="Metadata content">metadata</a></td>
@@ -70738,6 +70627,7 @@
<code><a href="#the-cite-element">cite</a></code>;
<code><a href="#the-code-element">code</a></code>;
<code><a href="#the-command-element">command</a></code>;
+ <code><a href="#the-data-element">data</a></code>;
<code><a href="#the-datalist-element">datalist</a></code>;
<code><a href="#the-del-element">del</a></code>;
<code><a href="#the-details-element">details</a></code>;
@@ -70795,7 +70685,6 @@
<code><a href="#svg">svg</a></code>;
<code><a href="#the-table-element">table</a></code>;
<code><a href="#the-textarea-element">textarea</a></code>;
- <code><a href="#the-time-element">time</a></code>;
<code><a href="#the-u-element">u</a></code>;
<code><a href="#the-ul-element">ul</a></code>;
<code><a href="#the-var-element">var</a></code>;
@@ -70840,6 +70729,7 @@
<code><a href="#the-cite-element">cite</a></code>;
<code><a href="#the-code-element">code</a></code>;
<code><a href="#the-command-element">command</a></code>;
+ <code><a href="#the-data-element">data</a></code>;
<code><a href="#the-datalist-element">datalist</a></code>;
<code><a href="#the-dfn-element">dfn</a></code>;
<code><a href="#the-em-element">em</a></code>;
@@ -70871,7 +70761,6 @@
<code><a href="#the-sub-and-sup-elements">sup</a></code>;
<code><a href="#svg">svg</a></code>;
<code><a href="#the-textarea-element">textarea</a></code>;
- <code><a href="#the-time-element">time</a></code>;
<code><a href="#the-u-element">u</a></code>;
<code><a href="#the-var-element">var</a></code>;
<code><a href="#the-video-element">video</a></code>;
@@ -71003,6 +70892,7 @@
<code><a href="#the-canvas-element">canvas</a></code>;
<code><a href="#the-cite-element">cite</a></code>;
<code><a href="#the-code-element">code</a></code>;
+ <code><a href="#the-data-element">data</a></code>;
<code><a href="#the-details-element">details</a></code>;
<code><a href="#the-dfn-element">dfn</a></code>;
<code><a href="#the-div-element">div</a></code>;
@@ -71051,7 +70941,6 @@
<code><a href="#svg">svg</a></code>;
<code><a href="#the-table-element">table</a></code>;
<code><a href="#the-textarea-element">textarea</a></code>;
- <code><a href="#the-time-element">time</a></code>;
<code><a href="#the-u-element">u</a></code>;
<code><a href="#the-var-element">var</a></code>;
<code><a href="#the-video-element">video</a></code>
@@ -71190,10 +71079,6 @@
<code title="attr-mod-datetime"><a href="#attr-mod-datetime">ins</a></code>
<td> Date and (optionally) time of the change
<td> <a href="#valid-date-string-with-optional-time">Valid date string with optional time</a>
- <tr><th> <code title="">datetime</code>
- <td> <code title="attr-time-datetime"><a href="#attr-time-datetime">time</a></code>
- <td> Value of the element
- <td> <a href="#valid-date-or-time-string">Valid date or time string</a>*
<tr><th> <code title="">default</code>
<td> <code title="attr-track-default"><a href="#attr-track-default">track</a></code>
<td> Enable the track if no other <a href="#text-track">text track</a> is more suitable.
@@ -71382,7 +71267,7 @@
<tr><th> <code title="">max</code>
<td> <code title="attr-input-max"><a href="#attr-input-max">input</a></code>
<td> Maximum value
- <td> varies*
+ <td> Varies*
<tr><th> <code title="">max</code>
<td> <code title="attr-meter-max"><a href="#attr-meter-max">meter</a></code>;
<code title="attr-progress-max"><a href="#attr-progress-max">progress</a></code>
@@ -71413,7 +71298,7 @@
<tr><th> <code title="">min</code>
<td> <code title="attr-input-min"><a href="#attr-input-min">input</a></code>
<td> Minimum value
- <td> varies*
+ <td> Varies*
<tr><th> <code title="">min</code>
<td> <code title="attr-meter-min"><a href="#attr-meter-min">meter</a></code>
<td> Lower bound of range
@@ -71491,10 +71376,6 @@
<td> "<code title="attr-media-preload-none"><a href="#attr-media-preload-none">none</a></code>";
"<code title="attr-media-preload-metadata"><a href="#attr-media-preload-metadata">metadata</a></code>";
"<code title="attr-media-preload-auto"><a href="#attr-media-preload-auto">auto</a></code>"
- <tr><th> <code title="">pubdate</code>
- <td> <code title="attr-time-pubdate"><a href="#attr-time-pubdate">time</a></code>
- <td> Whether the element's value represents a publication time for the nearest <code><a href="#the-article-element">article</a></code> or <code><a href="#the-body-element">body</a></code>
- <td> <a href="#boolean-attribute">Boolean attribute</a>
<tr><th> <code title="">radiogroup</code>
<td> <code title="attr-command-radiogroup"><a href="#attr-command-radiogroup">command</a></code>
<td> Name of group of commands to treat as a radio button group
@@ -71702,9 +71583,13 @@
<td> Value to be used for <a href="#form-submission">form submission</a>
<td> <a href="#attribute-text">Text</a>
<tr><th> <code title="">value</code>
+ <td> <code title="attr-data-value"><a href="#attr-data-value">input</a></code>
+ <td> Machine-readable value
+ <td> <a href="#attribute-text">Text</a>*
+ <tr><th> <code title="">value</code>
<td> <code title="attr-input-value"><a href="#attr-input-value">input</a></code>
<td> Value of the form control
- <td> varies*
+ <td> Varies*
<tr><th> <code title="">value</code>
<td> <code title="attr-li-value"><a href="#attr-li-value">li</a></code>
<td> <a href="#ordinal-value">Ordinal value</a> of the list item
@@ -72162,6 +72047,9 @@
<tr><td> <code><a href="#the-command-element">command</a></code>
<td> <code><a href="#htmlcommandelement">HTMLCommandElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
+ <tr><td> <code><a href="#the-data-element">data</a></code>
+ <td> <code><a href="#htmldataelement">HTMLDataElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
+
<tr><td> <code><a href="#the-datalist-element">datalist</a></code>
<td> <code><a href="#htmldatalistelement">HTMLDataListElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
@@ -72393,9 +72281,6 @@
<tr><td> <code><a href="#the-thead-element">thead</a></code>
<td> <code><a href="#htmltablesectionelement">HTMLTableSectionElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
- <tr><td> <code><a href="#the-time-element">time</a></code>
- <td> <code><a href="#htmltimeelement">HTMLTimeElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
-
<tr><td> <code><a href="#the-title-element">title</a></code>
<td> <code><a href="#htmltitleelement">HTMLTitleElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
Received on Saturday, 29 October 2011 05:43:22 UTC