w3-video.com logo

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

Share it



time nested within elements, elements nested within time

Classified as: flow content, phrasing content, palpable content

Parents, time

Children, time

Examples: time parents, time children

Valid Syntax 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html>
<head>
<title>...</title>
</head>
<body>

<p>
<time>
...
</time>
</p>
<time>...</time>

</body>
</html>
Valid Syntax 2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html>
<head>
<title>...</title>
</head>
<body>

<p>
<time datetime="2013-08">
<em>
...
</em>
</time>
</p>

</body>
</html>
Invalid Syntax 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html>
<head>
<title>...</title>
<time>...</time>
</head>
<body>

<time>
<article>
...
</article>
<time>
...
</time>
</time>

</body>
</html>

Syntax 1: Valid, time nested within p, body: allowed
Syntax 2: Valid, em nested within time: allowed, because the datetime attribute is present on time
Syntax 3: Invalid, time nested within time, head: not allowed; article nested within time: not allowed

Video demonstration nesting time element

HTML5 nesting time Tutorial

min video details
00:00 video tutorial: nesting time
00:05 - if datetime attribute is present on time element, elements classified as phrasing content can be nested inside it

- if datetime attribute is absent on time element, only content valid time-datetime format can be added inside
00:17 A) datetime attribute absent
datetime attribute is absent on all these time elements → the content inside it represents valid time-datetime format
00:24 e.g. 2014 represents valid time-datetime format (YYYY) for year
00:30 19:30 represents valid time-datetime format (hh:mm) for time and so forth
00:51 B) datetime attribute present
datetime attribute is present on time element → elements classified as phrasing content can be nested inside it
e.g. b element
01:09 example of invalid syntax:
phrasing content (b element) nested inside time element when datetime attribute is missing
time intro time browser display Local date and time vs. Global date and time time syntaxtime datetime attribute