New structural elements in HTML5

1 de 8

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

New structural elements in HTML5

2 Other HTML5 elements

Other HTML5 elements: time, details, summary, etc.

The <time> element
Introduction
The <time> element is useful for marking a time 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 YYYY-MM-DD.
This 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.
External resources
W3C specification: http://www.w3.org/TR/html5/the-time-element.html#the-time-element
Interesting article by Bruce Lawson: http://www.brucelawson.co.uk/2012/best-of-time/
Example:

1
2
3
4
5
6

<date> element and attributes

We open at <time>10:00</time> every morning.
I have a meeting the <time datetime="2012-02-14">Monday 14/02/2012.</time>.
Blog posts from the year <time datetime="2012">2012</time>.
Archives, blog posts for <time datetime="2012-04">April 2012</time>
This recipe was published by Michel the <time datetime="2012-04-16">February 16, 2012</time>.

The datetime attribute

The datetime attribute can be used for indicating a date/time or a duration.
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:
<time datetime="1905">

The year 1905

<time datetime="1905-11">

November 1905

16/05/2015 04:32 p.m.

New structural elements in HTML5

2 de 8

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

<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)

Duration values
Duration values uses 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, like "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, its represented internally as a number of seconds. Because of this,
you cant specify a duration in terms of months, because a month isnt a precise number of seconds; a month can last from
28 to 31 days. Similarly, a year isnt a precise number of seconds; its 12 months and February sometimes has an extra day.
You still cant represent dates before the Christian era, as years cant 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 :

1
2
3
4
5

Examples of duration values

<h2>Recipe:</h2>
<ul>
<li> Preparation time: <time datetime="P30M">30 minutes</time> </ li>
<li> Cooking time: <time datetime="P10M"> 10 minutes</time> </ li>
</ul>

<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
previous section). However it is recommended to use a datetime attribute, as it gives more freedom on the way you can
display the date/time/duration in a human-readable form.
Examples :

16/05/2015 04:32 p.m.

New structural elements in HTML5

3 de 8

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

<time> element with no attributes

1
2
3
4
5
6

<time>2011-11</time>
<time>2011-11-12</time>
<time>14:54:39</time>
<time>2011-11-12 14:54:39</time>
<time>2011-W46</time>
<time>PT4H18M3S</time>

<summary> and <details> elements

Resources:
The W3C specification http://www.w3.org/TR/2012/WD-html5-20121025/the-details-element.html#the-detailselement

Above: examples of <details> and <summary> elements taken from the W3C specification page.

Introduction
These elements have been introduced for displaying a foldable zone in a HTML document.
The <details> element generates a simple no-JavaScript widget to show/hide element contents, optionally by clicking
on its child <summary> element.
Here is an example of what can be done using these elements: http://jsbin.com/ifofib/3/edit

And here is what is displayed after clicking on the small arrow-shaped icon to the left of the summary:

16/05/2015 04:32 p.m.

New structural elements in HTML5

4 de 8

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

Here is the code of this example:

1
2
3
4
5
6
7
8
9
10

<details> and <summary> elements, first example

<!DOCTYPE html>
<html>
<body>
<details>
<summary>How to beat the boss...spoiler alert !</summary>
<p> Just aim to the red spots near his eyes</p>
<p>Keep shooting at these spots until the eyes open, then hit quickly both eyes with your laser beam.</p>
</details>
</body>
</html>

The <summary>...</summary> is inside a <details>...</details> element. By clicking on the icon at the

left of the summary, the content of the <details> value is displayed/hidden.
<details> blocks can be in one another, like in this example: http://jsbin.com/ayojup/2/edit
Step 1: all unfolded

Step 2: click on top level summary icon:

Step3: click on embedded summary icon:

16/05/2015 04:32 p.m.

New structural elements in HTML5

5 de 8

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

Source code of this example:

1
2
3
4
5
6
7
8
9
10
11

Include one into another summary/details

<details>
<summary>How to beat the boss...spoiler alert !</summary>
<p> Just aim to the red spots near his eyes</p>
<p>Keep shooting at these spots until the eyes open, then hit quickly both eyes with your laser beam.</p>
<details>
<summary>Bonus and spoiler No 2: get a new weapon by cutting the tail of the boss</summary>
<p>Before finishing him, try to cut his trail, you will get a new weapon</p>
<p>Just try to stay behind him as long as you can, hitting his tail with your melee weapon,
after a few hits the trail will fall and you will get a new bonus weapon, then finish the boss.</p>
</details>
</details>

Pseudo css classes for styling summary icons

There are pseudo CSS classes to style this icon when it is in the open or closed state. As of October 2012 this is only
supported by the Chrome browser.
Examples adapted from: http://www.alsacreations.com/article/lire/1335-html5-details-summary.html (French tutorial).
Example1: http://jsbin.com/ifofib/46/edit

The color and background of the icon on the left is specified by the following CSS rule, which uses the pseudo
class ::-webkit-details-marker
In this example: red arrow, white background.
1
2
3
4

summary::-webkit-details-marker {
color:#FF0000;
background:#FFFFFF;
}

16/05/2015 04:32 p.m.

New structural elements in HTML5

6 de 8

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

Because the open attribute is added and removed automatically as the user interacts with the control, it can
be used in CSS to style the element differently based on its state.
Once opened, the selector details [open] can style the icon when <details> is unfolded. In this example: blue
arrow, turquoise background.
1
2
3
4

details[open] summary::-webkit-details-marker {
color:#0000FF;
background:#00FFFF;
}

It is also possible to change the icon itself using the pseudo class :after

Example 2: http://jsbin.com/ifofib/8/edit
EDIT : as 18 of March 2013, this example only worked with Chrome < version 25. It stopped working with
version 25. We are investigating and will keep you informed. Michel Buffa.

CSS rules used in this example:

Use a "+" shaped icon, pink, bold, etc... :
1
2
3
4
5
6
7
8
9
10
11

summary:after {
content: "+";
color: #FF00FF;
float: left;
font-size: 1.5em;
font-weight: bold;
margin: -5px 5px 0 0;
padding: 0;
text-align: center;
width: 20px;
}

Use a "-" shaped icon, white, when details are displayed:

1
2
3
4

details[open] summary:after {
content: "-";
color: #FFFFFF
}

Current support

16/05/2015 04:32 p.m.

New structural elements in HTML5

7 de 8

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

Up-to-date version of this table: http://caniuse.com/#feat=details

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.
It is important to understand the intended purpose of this tag. According to the HTML 5 specification:
The mark element represents a run of text in one document marked or highlighted for reference purposes, due
to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it
indicates a highlight that was not originally present but which has been added to bring the readers attention to
a part of the text that might not have been considered important by the original author when the block was
originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a
document, it indicates a part of the document that has been highlighted due to its likely relevance to the users
current activity.
Some use cases:
Display search results with search strings highlighted in the results...
Highlight important parts of a text, like "quoting parts", etc.
Replace <strong> and <em> with <mark> when suitable.
Example1: http://jsbin.com/otekov/3/edit

1
2
3
4
5
6
7
8
9
10

The <mark> element

<!DOCTYPE html>
<html>
<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>

The <mark> element can be used within other tags, such as in a <pre>, a <code>, or a <b>, like in this
example: http://jsbin.com/udocog/4/edit

16/05/2015 04:32 p.m.

New structural elements in HTML5

8 de 8

1
2
3
4
5
6

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

<mark> element embedded into other elements

<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

If you don't like the default yellow background, you may use some CSS to change the style of the <mark> element:
For example:

Can be obtained with this CSS rule:

1
2
3
4

mark {
background-color: green;
color: yellow;
}

16/05/2015 04:32 p.m.