Vincent Van Gogh was born , in Zundert, the Netherlands. He died , (age 37) in Auvers-sur-Oise, France.
The class attribute assigns one or more classnames to the <time> tag.
Classnames are defined in a stylesheet or in a local <style> element.
Classes, i.e. classnames, are used to style elements.
A class attribute styling two <time> elements.
Vincent Van Gogh was born , in Zundert, the Netherlands. He died , (age 37) in Auvers-sur-Oise, France.
<style>
.time-class { color: brown; background: moccasin; }
</style>
<article>
<p>
Vincent Van Gogh was born
<time class="time-class" datetime="1853-03-30">March 30, 1853</time>,
in Zundert, the Netherlands. He died
<time class="time-class" datetime="1890-07-29">July 29, 1890</time>,
(age 37) in Auvers-sur-Oise, France.
</p>
</article>
Classes (i.e. classnames) are used for styling the time element.
Multiple classnames are separated by a space.
JavaScript uses classes to access elements by classname.
Tip: class is a global attribute that can be applied to any HTML element.
<time class="classnames">
| Value | Description |
|---|---|
| classnames | One or more space-separated class names. |
A class attribute styling two <time> elements.
Clicking the button toggles a classname that boldens the time text.
Vincent Van Gogh was born , in Zundert, the Netherlands. He died , (age 37) in Auvers-sur-Oise, France.
<style>
.time { color: brown; background: moccasin; }
.bold { font-weight:bold; }
</style>
<style>
</style>
<article>
<p>
Vincent Van Gogh was born
<time class="time" datetime="1853-03-30">March 30, 1853</time>,
in Zundert, the Netherlands. He died
<time class="time" datetime="1890-07-29">July 29, 1890</time>,
(age 37) in Auvers-sur-Oise, France.
</p>
</article>
<br />
<button onclick="toggle();">Toggle class</button>
<script>
let toggle = () => {
let elements = document.getElementsByClassName("time");
[].forEach.call(elements, element => element.classList.toggle("bold"));
}
</script>
Two CSS classes are defined in the <style> element.
The class attribute in <time> assigns one classname.
Repeatedly clicking the button adds and removes another class, toggling the boldness of the element.
Here is when class support started for each browser:
 Chrome
|
6.0 | Sep 2010 |
 Firefox
|
4.0 | Mar 2011 |
 IE/Edge
|
9.0 | Mar 2011 |
 Opera
|
11.1 | Mar 2011 |
 Safari
|
5.0 | Jun 2010 |
Back to <time>
