<time> : Time (Date) element

by

Introduction

The <time> element in HTML is used to represent dates and times in a machine-readable format. It allows you to specify a specific point in time, a duration, or a range within a document. The content inside the <time> element can be a specific date and time, a duration, or a combination of both.

Here are a few examples of how you might use the <time> element:

1. Specific Date and Time:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>Meeting scheduled for <time datetime="2024-02-04T10:00">10:00 AM</time> tomorrow.</p>
</body>
</html>

Output :

2. Duration:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>The event will last for <time datetime="PT2H30M">2 hours and 30 minutes</time>.</p>
</body>
</html>

Output :

3. Range:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>Event starts at <time datetime="2024-02-04T18:00">6:00 PM</time> and ends at <time datetime="2024-02-04T21:00">9:00 PM</time>.</p>
</body>
</html>

Output :

In each of these examples, the datetime attribute is used to provide the machine-readable date and time format in the ISO 8601 format. This format allows browsers and other user agents to parse and understand the date and time information, aiding accessibility and search engine optimization.

The content inside the <time> element is typically displayed to users as-is, providing human-readable information about dates, times, durations, or ranges. However, it’s important to note that the datetime attribute is what conveys the machine-readable information, making it useful for developers and assistive technologies.

Leave a Comment