HTML5 time and mark elements

HTML5 time and mark elements

In previous articledetails 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.

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.

1

2

3

4

5

6

<h2>Example forDuration:</h2>

<ul>

<li>time value1:<time datetime="P40M">40minutes</time></li>

<li>Time value2:<time datetime="P11M">11minutes</time></li>

<li>Time value3:<time datetime="P21M">21minutes</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>.

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8/>

<title>Mark element</title>

</head>

<body>

<p>The<mark>mark</mark>element isusefortext the should be highlighted</p>