Mastering HTML Time Representation

Introduction

HTML provides a time tag that allows developers to represent human-readable time or date, which can also be readable by search engines in the machine-readable format. In this lab, we will learn how to use the time tag in HTML to create a date and time stamp.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/charset("`Character Encoding`") html/BasicStructureGroup -.-> html/lang_decl("`Language Declaration`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") subgraph Lab Skills html/basic_elems -.-> lab-70868{{"`HTML Time Representation`"}} html/charset -.-> lab-70868{{"`HTML Time Representation`"}} html/lang_decl -.-> lab-70868{{"`HTML Time Representation`"}} html/head_elems -.-> lab-70868{{"`HTML Time Representation`"}} html/para_br -.-> lab-70868{{"`HTML Time Representation`"}} end

Add the HTML boilerplate

To create an HTML file, we need to start with an HTML boilerplate. Copy and paste the following code in the index.html file.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Time Tag Lab</title>
  </head>
  <body></body>
</html>

Define date and time

To define a date and time, we need to use the time tag with a datetime attribute. The datetime attribute specifies the date and time in the machine-readable format. Add the following code inside the body tag to define the date and time:

<p>
  The current date and time is
  <time datetime="2022-07-23T18:30-05:00">23 July 2022, 6:30 PM</time>.
</p>

Add a valid time duration

The time tag can also be used to represent a valid time duration. We can add a valid time duration to the time tag using the datetime attribute. Add the following code inside the body tag to define the time duration:

<p>
  The total duration of the project was
  <time datetime="PT10M">10 minutes</time>.
</p>

Save the index.html file and open it in a web browser to view the date and time stamp created using the time tag.

Summary

In this lab, we learned how to use the time tag in HTML to create a date and time stamp. We also saw how to define a valid time duration using the same tag. The time tag is a powerful tool that can be used by developers to create human and machine-readable time and date representations.

HTML Time Representation