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
YYYY-MM-DD.
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>
<ul>
<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>
</ul>
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>
<html>
<head>
<meta charset=utf-8 />
<title>Mark element</title>
</head>
<body>
<p>The <mark>mark</mark> element is use for text the should be highlighted</p>
</body>
</html>
The text inside mark tag is highlighted.
In next article we will explore more HTML5 elements
About Author
maz
Maz is a software engineer, and a Zend Certified Engineer . His area of expertise contains PHP /Mysql, Node JS / MongoDB, Angular JS, IOS and android.
