documento 2 de html5

7/18/2019 Documento 2 de HTML5

http://slidepdf.com/reader/full/documento-2-de-html5 1/8

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:

< d a t e > e l e m e n t a n d a t t r ib u t e s

1

2

3

4

5

6

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

structural elements in HTML5 http://classroom.w3devcampus.com/mod/book/tool/print/index.p

8 16/05/2015 0

<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, 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 :

E x am p l e s o f d u r a t i o n v a l u e s

1

2

3

45

<h2>Recipe:</h2>

<ul>

<li> Preparation time: <time datetime="P30M">30 minutes</time> </ li>

<li> Cooking time: <

timedatetime="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 :


8 16/05/2015 0

< t i m e > e le m e n t w i t h n o a t t r i b u te s

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

element

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:


8 16/05/2015 0

Here is the code of this example:

< d e t a i l s > a n d < s u mm a r y > e l e m e n t s , f i r st e x a m p l e

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

< body>

<details>

<summary>How to beat the boss...spoiler alert !</summary>

 Just aim to the red spots near his eyes

Keep shooting at these spots until the eyes open, then hit quickly both eyes with your laser beam.

</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:


8 16/05/2015 0

Source code of this example:

I n c lu d e o n e in t o a n o t h e r su m m a r y / d e t a il s 1

2

3

4

5

6

7

8

9

10

11

<details>

<summary>How to beat the boss...spoiler alert !</summary>

 Just aim to the red spots near his eyes

Keep shooting at these spots until the eyes open, then hit quickly both eyes with your laser beam.

<details>

<summary>Bonus and spoiler No 2: get a new weapon by cutting the tail of the boss</summary>

Before finishing him, try to cut his trail, you will get a new weapon

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.

</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;

}


8 16/05/2015 0

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

78

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


8 16/05/2015 0

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

The element

The HTML 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 reader’s 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 user’s

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 and with when suitable.

Example1: http://jsbin.com/otekov/3/edit

Th e < m a r k > e l em e n t

1

2

3

4

5

67

8

9

10

<!DOCTYPE html>

<html>

<head >

< meta charset=utf-8 />

<title>JS Bin</title>

</head >< body>

Project is due in .zip format next monday.

</ body>

</html>

The element can be used within other tags, such as in a <pre>, a <code>, or a , like in this

example: http://jsbin.com/udocog/4/edit


8 16/05/2015 0

< m a r k > e l e m e n t e m b e d d e d i n t o ot h e r e le m e n t s

1

2

3

4

5

6

< body>

< pre>

<code>var i = 3;</code>

</ pre>

The var keyword is used to declare a variable in JavaScript.

</ body>

Change the default style of the element

If you don’t like the default yellow background, you may use some CSS to change the style of the element:

For example:

Can be obtained with this CSS rule:

1

2

34

mark {

background-color: green;

color: yellow;}

documento 2 de html5

Documents