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
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 .
|datetime attribute values
||The year 1905
||November 13th (any year)
||Week 21 from year 1905
|<time datetime=”1905-11-13 09:00″>
||November 13th year 1905, time = 9:00
||Same as previous example, both syntaxes are supported, with and without the “T” between date and time.
||9:00 in the morning, GMT
||9:00 in the morning, GMT minus 5 hours
||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>.
<meta charset=utf-8 />
<p>The <mark>mark</mark> element is use for text the should be highlighted</p>
The text inside mark tag is highlighted.
In next article we will explore more HTML5 elements