Embedded Files
The <time> element
The <time> element
The <time> element is useful for marking a time or a duration in a document.
It provides both a human readable part (the part between <time> and </time>) and a machine readable part contained within a datetime attribute. Dates are expressed as YYYY-MM-DD.
The machine readable part adds semantics that can be used by search engines for indexing, by browsers or by browser extensions, or by JavaScript code. Useful scenarios include generating alerts for birthdays, automatically adding dates or events that contain <time> elements in a calendar, etc.
Example:
We open at <time>10:00</time> every morning.
I have a meeting the <time datetime="2020-02-14">Monday 14/02/2020.</time>.
Blog posts from the year <time datetime="2020">2020</time>.
Archives, blog posts for <time datetime="2020-04">April 2020</time>
This recipe was published by Michel the <time datetime="2020-04-16">April 16, 2020</time>.
The datetime attribute
The datetime attribute
The datetime attribute can be used for indicating a date/time or a duration.
Date/time values
Date/time values
Supports different specifications of time such as "a year", "a month in a year", "a week in a year", "a time", etc...
Here are some examples:
Duration values
Duration values
Duration values use the prefix “P” for “period” as in <time datetime="P4D"> (period = four days) ...
So you start the attribute string value with a "P", followed by a duration value that ends with another letter indicating the unit used: "D" for "days", “H” for hours, “M” for minutes and “S” for seconds.
You can separate the different elements "P", value and unit with spaces, but this is optional. So <time datetime="P4D"> is a duration of 4 days, as is <time datetime="P 4 D">.
Using a “T” after the “P” marker allows you to indicate a more accurate duration time: <time datetime="PT4H 6M 12.55S"> is a duration of 4 hours, 6 minutes and 12.55 seconds.
Alternatively, you could use also a duration time component.
From Bruce Lawson's article : "Whichever you choose, it’s represented internally as a number of seconds. Because of this, you can’t specify a duration in terms of months, because a month isn’t a precise number of seconds; a month can last from 28 to 31 days. Similarly, a year isn’t a precise number of seconds; it’s 12 months and February sometimes has an extra day.
You still can’t represent dates before the Christian era, as years can’t be negative. Neither can you indicate date ranges. To mark up From “21/02/2012 to 25/02/2012″, use two separate <time> elements."
Examples:
<h2>Recipe:</h2>
<ul>
<li> Preparation time: <time datetime="PT30M">30 minutes</time> </li>
<li> Cooking time: <time datetime="PT10M">10 minutes</time> </li>
</ul>
The <time> element with no attributes
The <time> element with no attributes
Used without attributes, the value between the opening <time> and closing </time> should follow the syntax given by the specification so that machines can understand it (same syntax as the one presented for the datetime attribute in the previous section). However it is recommended to use a datetime attribute, as it gives more freedom in the way you can display the date/time/duration in a human-readable form.
External resources:
External resources:
From the specification, the time element
On MDN's Web Docs, <time>
Support table for <time>
Old but interesting article by Bruce Lawson: "The best of <time>'s"
A CSS Tricks' article: "The 'time' element
The <mark> element
The <mark> element
The HTML <mark> tag is used for indicating text as marked or highlighted for reference purposes, due to its relevance in another context.
Some use cases:
Display search results with search strings highlighted in the results.
Highlight important parts of a text, such as "quoting parts", etc.
Replace <strong> and <em> with <mark> when suitable.
Example #1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<p>Project is due in <mark>.zip format</mark> next Monday.</p>
</body>
</html>
Example #2:
HTML:
<body>
<pre>
<code><mark>var</mark> i = 3;</code>
</pre>
<p>The var keyword is used to declare a variable in JavaScript.</p>
</body>
Change the default style of the <mark> element
Change the default style of the <mark> element
If you don't like the default yellow background, you may use CSS to change the style of the <mark> element.
For example:
... comes with this CSS rule:
mark {
background-color: green;
color: yellow;
}
External resources
External resources
From the specification, the mark element
On MDN's Web Docs: <mark>: The Mark Text element
Support table for <mark>
An article on Web Platform News: "The <mark> element could help make your text more scannable"
Page updated
Google Sites
Report abuse