Categories
Learn HTML

HTML: time tag

html time tag

HTML: <time> tag

In this series of learning HTML, we will teach you how to use HTML <time> tag with proper syntax and lots of examples. Let’s start on the HTML time tag.

Description of HTML time tag

HTML5 there is a tag called HTML <time> tag which helps to defines a date (in the Gregorian calendar) or time value (on a 24-hour clock) inside HTML code. You can refer this tag via <time> element.

 

Proper Syntax of HTML time tag

The proper syntax for the HTML time tag is as shown below:

<body>
<time>Time and date goes here</time>
</body>

 

Global Attributes

HTML time tag is a part of Global Attributes.

Event Attributes

HTML time tag is a part of Event Attributes.

Attributes

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

Attribute HTML Compatibility Description
datetime HTML5 This value indicates the date and time with an optional time string.
pubDate HTML5 This is used for the last publication date for the item.

 

Note

  • You can find the HTML time tag inside the HTML body tag.
  • HTML time tag can’t be used for all those dates which are prior to the Gregorian calendar.
  • For All the Browsers which are Older than Internet Explorer 9, use HTML5shiv, which is a javascript workaround to provide proper support for new HTML5 elements like header tag, article tag, main tag, article tag, nav tag, etc.

 

Browser Compatibility

The HTML tbody tag has essential support with the following browsers:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. Safari Mobile

 

Example of HTML time tag

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

  1. HTML5
  2. HTML4
  3. XHTML

HTML5 Document

If you created a new HTML webpage in HTML 5, your HTML time tag might look like this, as shown below:

<!doctype html>
<html>

<head>
<metacharset="UTF-8">
<title>HTML5 Example by www.home4cloud.com</title>
</head>

<body>
<article>
  <h2>Heading for Article</h2>
  <p>This tag is for paragraph</p>
</article>
<footer>
<p>This article was published on <time>2022-04-01</time>.</p>
<p>Our Site Office opens at <time>10:00</time>.</p>
</footer>
</body>

</html>

In the above HTML5 Document sample, we have created HTML time tags that display the date, and the second one displays a time expressed on the 24-hour clock.

 

 

HTML 4.01 Transitional Document

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

 

XHTML 1.0 Transitional Document

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

 

XHTML 1.0 Strict Document

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

 

XHTML 1.1 Document

You can not use the HTML time tag in XHTML 1.1