@ou-imdt/css/docs/native/time.md

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

# time

The time tag is an inline tag that allows the representation of a specific time.

The time tag has an __optional__ datetime tag for machine-readable formats (for search engine optimization).

It can represent a time on the 24 hour clock, a precise date on the gregorian calendar or a valid time duration.

Valid datetime formats can be found on the [MDN time element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time) page.

## Example

<div class="card">
  <p>The Cure will be celebrating their 40th anniversary on <time datetime="2018-07-07">July 7</time> in
    London's Hyde Park.</p>

  <p>The concert starts at <time datetime="20:00">20:00</time> and you'll be able to enjoy the band for at
    least <time datetime="PT2H30M">2h 30m</time>.</p>
</div>

<details class="compact">
  <summary>HTML</summary>

```html
  <p>The Cure will be celebrating their 40th anniversary on <time datetime="2018-07-07">July 7</time> in
    London's Hyde Park.</p>

  <p>The concert starts at <time datetime="20:00">20:00</time> and you'll be able to enjoy the band for at
    least <time datetime="PT2H30M">2h 30m</time>.</p>
```

</details>