HTML5 time and mark elements

HTML5 time and mark elements

In previous  article details and summary elements were discussed. Now we are going to look into time and mark elements.

The <time> element

Time element is useful for marking a time or duration in an HTML page.  The part with in <time> and </time> is readable by Humans and datetime attribute represent machine readable content. date would be in following format


The machine readable part is used by search engines, or browser of JavaScript code snippets. We can include date and times for different events in our web pages.

College graduation date is <time datetime="2012-10-14">Monday 14/10/2012.</time>.
Birthday year is <time datetime="1986">1986</time>.
Archives, blog posts for <time datetime="2013-03">March 2013</time>

 The datetime attribute

The date time attribute is used for indicating a date/time  or duration. The attribute supports specifications of time as “a year”, “a month in a year”, “a week in a year”, “a time” etc.

Syntax for date time attribute .

From edx
datetime attribute values Interpretation
<time datetime=”1905″> The year 1905
<time datetime=”1905-11″> November 1905
<time datetime=”11-13″> November 13th (any year)
<time datetime=”1905-W21″> Week 21 from year 1905
<time datetime=”1905-11-13 09:00″> November 13th year 1905, time = 9:00
<time datetime=”1905-11-13T09:00″> Same as previous example, both syntaxes are supported, with and without the “T” between date and time.
<time datetime=”09:00Z”> 9:00 in the morning, GMT
<time datetime=”09:00-05″> 9:00 in the morning, GMT minus 5 hours
<time datetime=”09:00+05:45″> 9:00 in the morning, GMT plus 5 hours 45 minutes, (like in Nepal that has 5:45 of difference with GMT)

Values for duration.

We can us prefix “P” for period. <time datetime=”P9D”> (period = Nine days). The attribute value can be P for period and then  “D” for “days”,  “H” used for hours, “M” used for minutes and “S”  used for seconds. datetime=”P4D” can also be written with spaces datetime=”P 4 D” but is optional.

If we use   “T” after the “P”  it allow  indicate a more accurate duration time: <time datetime=”PT5H 16M 11.15S”> is a duration of 5 hours, 16 minutes and 11.15 seconds.

    <h2>Example for Duration:</h2>
      <li> time value 1: <time datetime="P40M">40 minutes</time> </li>
      <li> Time value 2:     <time datetime="P11M"> 11 minutes</time> </li>
     <li> Time value 3:     <time datetime="P21M"> 21 minutes</time> </li>

It is recommended to use datetime attribute.

The <mark> element

The <mark> tag in HTML5 is used when we are indicating text as marked or highlighted for reference purposes.

We can display search results or quoted text or use it in replacement of <strong> or <em>.

    <!DOCTYPE html>
    <meta charset=utf-8 />
    <title>Mark element</title>
    <p>The <mark>mark</mark> element is use for text the should be highlighted</p>

mark element HTML5

The text inside mark tag is highlighted.


In next article we will explore more HTML5 elements