totn HTML

HTML: <time> tag

This HTML tutorial explains how to use the HTML element called the <time> tag with syntax and examples.

Description

The HTML <time> tag is an HTML5 element that defines either a time value (on a 24-hour clock) or a date (in the Gregorian calendar) in the HTML document. This tag is also commonly referred to as the <time> element.

Syntax

In HTML, the syntax for the <time> tag is:

<body>
<time>Date and time goes here</time>
</body>

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <time> tag:

Attribute Description HTML Compatibility
datetime Value indicating the time and date with an optional time string HTML5
pubdate Boolean value indicating that the <time> tag is the publication date for the nearest <article> or <body> ancestor HTML5

Note

  • The HTML <time> element is found within the <body> tag.
  • The <time> tag should not be used is the date can be calculated.
  • The <time> tag should not be used for dates prior to the Gregorian calendar.
  • For IE browsers older than IE 9, use HTML5shiv which is a javascript workaround to provide support for the new HTML5 elements such as: <header>, <main>, <article>, <section>, <aside>, <nav>, <footer>.

Example

We will discuss the <time> tag below, exploring examples of how to use the <time> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

HTML5 Document

If you created a new web page in HTML5, your <time> tag might look like this:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
<article>
  <h1>Heading for Article</h1>
  <p>Text that appears under article</p>
</article>
<footer>
  <p>This article was published on <time>2013-12-28</time>.</p>
  <p>Our business opens at <time>09:00</time>.</p>
</footer>
</body>

</html>

In this HTML5 Document example, we have created two <time> tags - the first <time> tag displays a date and the second one displays a time expressed on 24-hour clock.

HTML 4.01 Transitional Document

You can not use the <time> tag in HTML 4.01 Transitional.

XHTML 1.0 Transitional Document

You can not use the <time> tag in XHTML 1.0 Transitional.

XHTML 1.0 Strict Document

You can not use the <time> tag in XHTML 1.0 Strict.

XHTML 1.1 Document

You can not use the <time> tag in XHTML 1.1

Share on: