Expand your HTML skills through an MDN Fellowship - Apply by April 1 http://mzl.la/MDNFellowship

mozilla

Revision 40729 of <time>

  • Revision slug: HTML/HTML_Elements/time
  • Revision title: time
  • Revision id: 40729
  • Created:
  • Creator: avsaro
  • Is current revision? No
  • Comment 35 words added

Revision Content

{{ HTMLVersionHeader("5") }}

Summary

The HTML time element (<time>) represents either time on a 24-hour clock or a precise date in the Gregorian calendar (with optional time and timezone information).

This element is intended to be used presenting dates and times in a machine readable format. This can be helpful for user agents to offer any event scheduling for user's calendar. 

Usage note: This element is not appropriate for instances where a specific date cannot be calculated, nor should it be used for dates prior to the introduction to the Gregorian calendar (due to complications with calculating those dates).
Status note: This element is still being designed and discussed as of 2011 (http://blog.whatwg.org/weekly-time-data)

Usage context

Content categories flow content, phrasing content
Permitted content Phrasing content, but no descendant time elements.
Tag omission None, both the start tag and the end tag are mandatory.
Permitted parent elements Any element that accepts phrasing content.
Normative document HTML5, section 4.6.10

Attributes

Like all other HTML elements, this element supports the global attributes.

{{ htmlattrdef("datetime") }}
This attribute indicates the time and date of the element and must be a valid date with an optional time string. If the value cannot be parsed as a date with an optional time string, the element does not have an associated time stamp.
{{ htmlattrdef("pubdate") }}
This Boolean attribute specifies that the date and time given by the element is the publication date of a document. The document it applies to is either the nearest ancestor article element or the document as a whole (if there is no ancestor article element). If true, the time element must have a corresponding date. Additionally, each time element indicating a publication date must be the only time element that does so for that document.

DOM interface

This element implements the HTMLTimeElement interface.

Examples

Simple example

<p>The concert starts at <time>20:00</time>.</p>

Above HTML will output:

The concert starts at <time>20:00</time>.

pubdate example

<article>
  <p>This article was created on <time pubdate>2011-01-28</time>.</p>
</article>

Above HTML will output:

This article was created on <time pubdate="pubdate">2011-01-28</time>.

datetime example

<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>

Above HTML will output:

The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.

Compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatUnknown() }} {{ CompatNo() }} {{ bug("629801") }} {{ CompatUnknown() }} 11.50 {{ CompatUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Revision Source

<p>{{ HTMLVersionHeader("5") }}</p>
<h2>Summary</h2>
<p>The HTML <em>time</em> element (<code>&lt;time&gt;</code>) represents either time on a 24-hour clock or a precise date in the <a class="external" href="http://en.wikipedia.org/wiki/Gregorian_calendar" title="http://en.wikipedia.org/wiki/Gregorian_calendar">Gregorian calendar</a> (with optional time and timezone information).</p>
<p>This element is intended to be used presenting dates and times in a machine readable format. This can be helpful for user agents to offer any event scheduling for user's calendar. </p>
<div class="note"><strong>Usage note: </strong>This element is not appropriate for instances where a specific date cannot be calculated, nor should it be used for dates prior to the introduction to the Gregorian calendar (due to complications with calculating those dates).</div>
<div class="note">Status note: This element is still being designed and discussed as of 2011 (<a class="external" href="http://blog.whatwg.org/weekly-time-data" title="http://blog.whatwg.org/weekly-time-data">http://blog.whatwg.org/weekly-time-data</a>)</div>
<h3>Usage context</h3>
<table class="standard-table"> <tbody> <tr> <td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">Content categories</a></td> <td><a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">flow content</a>, <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">phrasing content</a></td> </tr> <tr> <td>Permitted content</td> <td><a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">Phrasing content</a>, but no descendant <code>time</code> elements.</td> </tr> <tr> <td>Tag omission</td> <td>None, both the start tag and the end tag are mandatory.</td> </tr> <tr> <td>Permitted parent elements</td> <td>Any element that accepts phrasing content.</td> </tr> <tr> <td>Normative document</td> <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-time-element" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-time-element">HTML5, section 4.6.10</a></td> </tr> </tbody>
</table>
<h3>Attributes</h3>
<p>Like all other HTML elements, this element supports the <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>.</p>
<dl> <dt>{{ htmlattrdef("datetime") }}</dt> <dd>This attribute indicates the time and date of the element and must be a <a class="external" href="http://www.w3.org/TR/html5/common-microsyntaxes.html#valid-date-string-with-optional-time" title="http://www.w3.org/TR/html5/common-microsyntaxes.html#valid-date-string-with-optional-time">valid date with an optional time string</a>. If the value cannot be parsed as a date with an optional time string, the element does not have an associated time stamp.</dd> <dt>{{ htmlattrdef("pubdate") }}</dt> <dd>This Boolean attribute specifies that the date and time given by the element is the publication date of a document. The document it applies to is either the nearest ancestor article element or the document as a whole (if there is no ancestor <a href="/en/HTML/Element/article" title="en/HTML/Element/Article">article</a> element). If true, the <code>time</code> element must have a corresponding date. Additionally, each <code>time</code> element indicating a publication date must be the only <code>time</code> element that does so for that document.</dd>
</dl>
<h3>DOM interface</h3>
<p>This element implements the <code><a href="/en/DOM/HTMLTimeElement" title="en/DOM/HTMLTimeElement">HTMLTimeElement</a></code> interface.</p>
<h3>Examples</h3>
<h4 name="Simple_example">Simple example</h4>
<pre class="brush: html">&lt;p&gt;The concert starts at &lt;time&gt;20:00&lt;/time&gt;.&lt;/p&gt;
</pre>
<p>Above HTML will output:</p>
<p>The concert starts at &lt;time&gt;20:00&lt;/time&gt;.</p>
<h4 name="Pubdate_example"><code>pubdate</code> example</h4>
<pre class="brush: html">&lt;article&gt;
  &lt;p&gt;This article was created on &lt;time pubdate&gt;2011-01-28&lt;/time&gt;.&lt;/p&gt;
&lt;/article&gt;
</pre>
<p>Above HTML will output:</p>
<p>This article was created on &lt;time pubdate="pubdate"&gt;2011-01-28&lt;/time&gt;.</p>
<h4 name="Datetime_example"><code>datetime</code> example</h4>
<pre class="brush: html">&lt;p&gt;The concert took place on &lt;time datetime="2001-05-15 19:00"&gt;May 15&lt;/time&gt;.&lt;/p&gt;
</pre>
<p>Above HTML will output:</p>
<p>The concert took place on &lt;time datetime="2001-05-15 19:00"&gt;May 15&lt;/time&gt;.</p>
<h2>Compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatNo() }} {{ bug("629801") }}</td> <td>{{ CompatUnknown() }}</td> <td>11.50</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
Revert to this revision