HTML <time> tagS2C Home   « HTML <time> tag

Definition

The <time> tag is used for defining the date and/or time within a HTML document.

The <time> tag was introduced in HTML5.

Examples


<p>Does early evening start at <time>3:00</time>, <time>4:00</time> or <time>5:00</time>?.</p>
<p>What costumes shall I get the children for <time datetime="2020-10-31 18:00"> Halloween</time>?.</p>

Does early evening start at , or ?.

What costumes shall I get the children for ?.

In the examples above we are creating two time elements, the second of which used the datetime attribute.

Attributes

The following attributes can be used with the <time> tag.


<time> Specific Attributes
Attribute Value Description Example
datetimedatetimeMachine readable form of the <time> element which equates to the value within aforesaid element. 

<time datetime="1970-01-01">Time information here</time>
<u> Global Attributes
Attribute Description Example
Common
classSpecifies a classname for the element allowing you to apply the style of the predefined class to the content. 

<time class="name">Time information here</time>
idSpecifies a unique id for the element allowing you to apply the style of the predefined id to the content. 

<time id="name">Time information here</time>
styleSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<time style="color:red;">Time information here</time>
titleSpecifies an inline style for the element allowing you to apply the style to the content. 

<time title="Content info">Time information here</time>
Keyboard
accesskeySpecifies a keyboard shortcut to associate with the element. 

<time accesskey="a">Time information here</time>
tabindexSpecifies a tab order for the element. 

<time tabindex="1">Time information here</time>
Language
dirSpecifies the directional flow of the content. 

<!-- The text will flow from left to right -->
<time dir="ltr">Time information here</time>
<!-- The text will flow from right to left -->
<time dir="rtl">Time information here</time>
langSpecifies a language code for the content of the element. 

<time lang="en">Time information here</time>
spellcheckSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<!-- Valid values true and false. -->
<!-- Default inherited / browser specific. -->
<time spellcheck="true">Time information here</time>
translateSpecifies an inline style for the element allowing you to apply the style to the content. 

<!-- Valid values yes and no. -->
<!-- Default yes. -->
<time translate="no">Time information here</time>
Miscellaneous
contenteditableSpecifies whether the content of the element is editable. 

<!-- Valid values true and false. -->
<!-- Default inherited. -->
<time contenteditable="true">Time information here</time>
draggableSpecifies whether the element is draggable. 

<!-- Valid values true and false. -->
<!-- Default browser specific. -->
<time draggable="true">Time information here</time>
hiddenSpecifies whether the element is not yet, or no longer, relevant. 

<!-- Valid values an empty string or hidden -->
<time hidden>Time information here</time> 
<time hidden="hidden">Time information here</time>
<time> Event Attributes
Attribute Description Example
Document Element
oncopyThe script to be run when the user copies the content of an element. 

 <!-- Executes go() function -->
<time oncopy="go()">Time information here</time>
oncutThe script to be run when the user cuts the content of an element. 

 <!-- Executes go() function -->
<time oncut="go()">Time information here</time>
onpasteThe script to be run when the user pastes some content into an element. 

 <!-- Executes go() function -->
<time onpaste="go()">Time information here</time>
Drag and Drop
ondragThe script to be run when an element is dragged. 

 <!-- Executes go() function -->
<time ondrag="go()">Time information here</time>
ondragendThe script to be run when an element has stopped being dragged. 

 <!-- Executes go() function -->
<time ondragend="go()">Time information here</time>
ondragenterThe script to be run when an element has been dragged to a valid drop target. 

 <!-- Executes go() function -->
<time ondragenter="go()">Time information here</time>
ondragleaveThe script to be run when an element leaves a valid drop target. 

 <!-- Executes go() function -->
<time ondragleave="go()">Time information here</time>
ondragoverThe script to be run when an element is being dragged over a valid drop target. 

 <!-- Executes go() function -->
<time ondragover="go()">Time information here</time>
ondragstartThe script to be run at the start of a drag operation. 

 <!-- Executes go() function -->
<time ondragstart="go()">Time information here</time>
ondropThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<time ondrop="go()">Time information here</time>
Form
onblurThe script to be run when the element loses focus. 

 <!-- Executes go() function -->
<time onblur="go()">Time information here</time>
onchangeThe script to be run when object changed and attempt to leave field. 

 <!-- Executes go() function -->
<time onchange="go()">Time information here</time>
oncontextmenuThe script to be run when a context menu is triggered. 

 <!-- Executes go() function -->
<time oncontextmenu="go()">Time information here</time>
onfocusThe script to be run when the element gets focus. 

 <!-- Executes go() function -->
<time onfocus="go()">Time information here</time>
oninputThe script to be run when an element gets user input. 

 <!-- Executes go() function -->
<time oninput="go()">Time information here</time>
oninvalidThe script to be run when an element is invalid. 

 <!-- Executes go() function -->
<time oninvalid="go()">Time information here</time>
onresetThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<time onreset="go()">Time information here</time>
onselectThe script to be run when some or all of the contents of an object are selected. 

 <!-- Executes go() function -->
<time onselect="go()">Time information here</time>
onsubmitThe script to be run when a form is submitted. 

 <!-- Executes go() function -->
<time onsubmit="go()">Time information here</time>
Keyboard
onkeydownThe script to be run when an element is in focus and keyboard key is pressed down. 

 <!-- Executes go() function -->
<time onkeydown="go()">Time information here</time>
onkeypressThe script to be run when an element is in focus and keyboard key is pressed down and released. 

 <!-- Executes go() function -->
<time onkeypress="go()">Time information here</time>
onkeyupThe script to be run when an element is in focus and keyboard key is released. 

 <!-- Executes go() function -->
<time onkeyup="go()">Time information here</time>
Media
onabortThe script code to be run on abort. 

 <!-- Executes go() function -->
<time onabort="go()">Time information here</time>
oncanplayThe script to be run when a file has buffered enough so it is ready to start playing. 

 <!-- Executes go() function -->
<time oncanplay="go()">Time information here</time>
oncanplaythroughThe script to be run when a file can be played all the way to the end without further need of buffering. 

 <!-- Executes go() function -->
<time oncanplaythrough="go()">Time information here</time>
oncuechangeThe script to be run when the cue changes when using the track element. 

 <!-- Executes go() function -->
<time oncuechange="go()">Time information here</time>
ondurationchangeThe script to be run when the length of the media is changed. 

 <!-- Executes go() function -->
<time ondurationchange="go()">Time information here</time>
onemptiedThe script to be run when a media resource element suddenly becomes empty, usually due to an error. 

 <!-- Executes go() function -->
<time onemptied="go()">Time information here</time>
onendedThe script to be run when the media has reach the end. 

 <!-- Executes go() function -->
<time onended="go()">Time information here</time>
onloadeddataThe script to be run when media data is loaded and playback can start. 

 <!-- Executes go() function -->
<time onloadeddata="go()">Time information here</time>
onloadedmetadataThe script to be run when metadata has been loaded. 

 <!-- Executes go() function -->
<time onloadedmetadata="go()">Time information here</time>
onloadstartThe script to be run whenthe media resource has started loading. 

 <!-- Executes go() function -->
<time onloadstart="go()">Time information here</time>
onpauseThe script to be run when the media resource has been paused. 

 <!-- Executes go() function -->
<time onpause="go()">Time information here</time>
onplayThe script to be run when the media resource starts playback. 

 <!-- Executes go() function -->
<time onplay="go()">Time information here</time>
onplayingThe script to be run when when playback has already begun. 

 <!-- Executes go() function -->
<time onplaying="go()">Time information here</time>
onprogressThe script to be run when the browser is fetching the media data. 

 <!-- Executes go() function -->
<time onprogress="go()">Time information here</time>
onratechangeThe script to be run when the playback rate changes. 

 <!-- Executes go() function -->
<time onratechange="go()">Time information here</time>
onseekedThe script to be run when the seeking attribute is set to false indicating that seeking has finished. 

 <!-- Executes go() function -->
<time onseeked="go()">Time information here</time>
onseekingThe script to be run when the seeking attribute is set to true indicating that seeking is currently active. 

 <!-- Executes go() function -->
<time onseeking="go()">Time information here</time>
onstalledThe script to be run when the browser is unable to continue fetching media data. 

 <!-- Executes go() function -->
<time onstalled="go()">Time information here</time>
onsuspendThe script to be run when media data has stopped before being completely loaded. 

 <!-- Executes go() function -->
<time onsuspend="go()">Time information here</time>
ontimeupdateThe script to be run when the media resources current playback position has changed. 

 <!-- Executes go() function -->
<time ontimeupdate="go()">Time information here</time>
onvolumechangeThe script to be run when the volume has changed or been muted. 

 <!-- Executes go() function -->
<time onvolumechange="go()">Time information here</time>
onwaitingThe script to be run when the media resource has paused but is expected to resume. 

 <!-- Executes go() function -->
<time onwaiting="go()">Time information here</time>
Mouse
onclickThe script to be run when when a mouse is clicked on an element. 

 <!-- Executes go() function -->
<time onclick="go()">Time information here</time>
ondblclickThe script to be run when a mouse is double clicked on an element. 

 <!-- Executes go() function -->
<time ondblclick="go()">Time information here</time>
onmousedownThe script to be run when he mouse button is pressed down while the cursor is over an element. 

 <!-- Executes go() function -->
<time onmousedown="go()">Time information here</time>
onmousemoveThe script to be run when the mouse button is moved. 

 <!-- Executes go() function -->
<time onmousemove="go()">Time information here</time>
onmouseoutThe script to be run when the mouse cursor moves off an element. 

 <!-- Executes go() function -->
<time onmouseout="go()">Time information here</time>
onmouseoverThe script to be run when the mouse cursor moves over an element. 

 <!-- Executes go() function -->
<time onmouseover="go()">Time information here</time>
onmouseupThe script to be run when the mouse button is released while the cursor is over the element. 

 <!-- Executes go() function -->
<time onmouseup="go()">Time information here</time>
onwheelThe script to be run when the mouse wheel rolls up or down over an element. 

 <!-- Executes go() function -->
<time onwheel="go()">Time information here</time>
Scroll
onscrollThe script code to be run when the scrollbar of an element is being scrolled. 

 <!-- Executes go() function -->
<time onscroll="go()">Time information here</time>
Window - NONE

Relevant HTML Tutorials

Widgets / Miscellaneous