time datetime attribute
The datetime attribute on the time element:
- allows you to provide the machine-readable format of the time⁄+date marked up with element
- the value of the datetime attribute must be a valid time-datetime format
- datetime is a specific attribute → can be applied ONLY on the next HTML5 elements: del, ins, time
| valid time-datetime formats for: | syntaxes (formats) | examples |
|---|---|---|
| year | YYYY | 2014 |
| month | YYYY-MM | 2015-09 |
| date | YYYY-MM-DD | 2014-09-22 |
| date without year | MM-DD | 09-22 |
| week | YYYY-Www | 2014-W12 |
| time without seconds | hh:mm | 19:30 |
| time with seconds | hh:mm:ss | 19:30:15 |
| time with seconds and milliseconds | hh:mm:ss.msmsms | 19:30:15.456 |
| duration | hhh mmm sss | 1h 11m 44s |
| local date and time with T | YYYY-MM-DDThh:mm:ss.msmsms | 2014-12-25T00:00:00.001 |
| local date and time with space | YYYY-MM-DD hh:mm:ss.msmsms | 2014-12-25 00:00:00.001 |
| global date and time with T and Z | YYYY-MM-DDThh:mm:ss.msmsmsZ | 2014-12-25T00:00:00.001Z |
| global date and time with space and Z | YYYY-MM-DD hh:mm:ss.msmsmsZ | 2014-12-25 00:00:00.001Z |
| global date and time with T and + | YYYY-MM-DDThh:mm:ss.msmsms+hh:mm | 2014-12-25T00:00:00.001+05:00 |
| global date and time with space and + | YYYY-MM-DD hh:mm:ss.msmsms+hh:mm | 2014-12-25 00:00:00.001+05:00 |
| global date and time with T and + | YYYY-MM-DDThh:mm:ss.msmsms+hhmm | 2014-12-25T00:00:00.001+0500 |
| global date and time with space and + | YYYY-MM-DD hh:mm:ss.msmsms+hhmm | 2014-12-25 00:00:00.001+0500 |
| global date and time with T and - | YYYY-MM-DDThh:mm:ss.msmsms-hh:mm | 2014-12-25T00:00:00.001-05:00 |
| global date and time with space and - | YYYY-MM-DD hh:mm:ss.msmsms-hh:mm | 2014-12-25 00:00:00.001-05:00 |
| global date and time with T and - | YYYY-MM-DDThh:mm:ss.msmsms-hhmm | 2014-12-25T00:00:00.001-0500 |
| global date and time with space and - | YYYY-MM-DD hh:mm:ss.msmsms-hhmm | 2014-12-25 00:00:00.001-0500 |
| time-zone offset with Z | Z | Z |
| time-zone offset with GMT ⁄UTC+ | +hh:mm or +hhmm | +01:00 or +0100 |
| time-zone offset with GMT ⁄UTC- | -hh:mm or -hhmm | -06:00 or -0600 |
| parts of syntax marked up in green are optional parts of syntax marked up in orange are required | ||
Examples
| <time | attribute | = | "value(s)" | > | ... | Examples | |
|---|---|---|---|---|---|---|---|
| 1. | datetime | = | YYYY YYYY-MM YYYY-MM-DD MM-DD YYYY-Www hh:mm hh:mm:ss hh:mm:ss.msmsms hhh:mmm:sss YYYY-MM-DDThh:mm:ss.msmsms YYYY-MM-DD hh:mm:ss.msmsms YYYY-MM-DDThh:mm:ss.msmsmsZ YYYY-MM-DD hh:mm:ss.msmsmsZ YYYY-MM-DDThh:mm:ss.msmsms+hh:mm YYYY-MM-DD hh:mm:ss.msmsms+hh:mm YYYY-MM-DDThh:mm:ss.msmsms+hhmm YYYY-MM-DD hh:mm:ss.msmsms+hhmm YYYY-MM-DDThh:mm:ss.msmsms-hh:mm YYYY-MM-DD hh:mm:ss.msmsms-hh:mm YYYY-MM-DDThh:mm:ss.msmsms-hhmm YYYY-MM-DD hh:mm:ss.msmsms-hhmm Z +hh:mm +hhmm -hh:mm -hhmm | < datetime="2013"> ... < datetime="20:30"> ... < datetime="2h 16m 24s"> ... < datetime="2013-03-28T04:29:14"> ... < datetime="2013-03-28T04:29:14Z"> ... < datetime="2013-03-28T04:29:14+04:00"> ... < datetime="2013-03-28T04:29:14-04:00"> ... |
Video demonstration datetime attribute on time
HTML5 time datetime attribute Tutorial
| min | video details |
|---|---|
| 00:00 | video tutorial: datetime attribute on time element |
| 00:05 | datetime attribute allows you to provide the machine-readable format of the time ⁄+date marked up with time element |
| 00:15 | - taking the first example, datetime attribute is absent → its content must be a valid time-datetime format and it is: 2014 - the datetime attribute when present requires the exact same valid time-datetime format as its value |
| 00:32 | adding the datetime attribute to time element and a valid time-datetime format as value |
| 00:44 | when datetime attribute is present on time element, its value must be a valid time-datetime format and no longer the content of the time element |
| 00:54 | the machine-readable format (2014 as YYYY) of the content of the time element (= next year) is useful for machines (= user agents, search engine) |
| 01:00 | 2nd example: time element has no datetime attribute → time represents its content in this case, content that must have a valid time-datetime format and it has: 2014-09-22 (= a valid date format YYYY-MM-DD) |
| 01:11 | when adding the datetime attribute on time element, its value must be a valid time-datetime format and no longer the content of the time element |
| 01:27 | the machine-readable format (=2014-09-22 as YYYY-MM-DD) of the content (= tomorrow) of the time element is useful for machines only (= user agents, search engines) |