time要素を使えば、ブラウザ上で日時の認識や表示ができます。
シンプルな日時の表示方法
先ず、time要素を使わずに、日時の表示を行った(記述した)例を紹介します。
<body>
<p>マラソン大会は2020年10月25日に開催されました。</p>
<p>マラソン大会は13時45分にスタートしました。</p>
<p>マラソン大会は2020年10月25日13時45分に決行されました。</p>
</body>
body要素の中に、「文のかたまり（段落）」を示すp要素が3つあります。
それぞれのp要素の中には、日時の情報として「2020年10月25日」、「13時45分」、「2020年10月25日13時45分」と書かれたフレーズがあります。
プログラムを見てわかる通り、各日時の情報のフレーズをp要素の内容（文章）の中に書き込んでいるため、p要素の内容としてシンプルにブラウザに表示され、ユーザーは読むことができます。
しかし、「2020年10月25日13時45分」等のフレーズは、p要素の内容として認識されるものの、ブラウザ上で日時の情報として認識されません。
time要素の使い方
次に、time要素を使って、日時を表示した例を紹介します。
<body>
<p>マラソン大会は2020年10月25日に開催されました。</p>
<p>マラソン大会は13時45分にスタートしました。</p>
<p>マラソン大会は2020年10月25日13時45分に決行されました。</p>
<p>マラソン大会は<time>2020-10-25</time>に開催されました。</p>
<p>マラソン大会は<time>13:45</time>にスタートしました。</p>
<p>マラソン大会は<time>2020-10-25T13:45</time>に決行されました。</p>
</body>
先ほどのプログラムに、3つのp要素を追加しました。
上から4つ目のp要素の内容は、上から1つ目のp要素と同じ内容となるように記述しました。
なお、「2020年10月25日」の内容をtime要素を使って書き換える場合には、<time>2020-10-25</time>と記述する必要があり、その結果、ブラウザの表示は「2020-10-25」となりました。
また、上から5つ目のp要素の内容は、上から2つ目のp要素と同じ内容となるように記述したものです。
すなわち、「13時45分」の内容をtime要素を使って書き換える場合には、<time>13:45</time>と記述する必要があり、その結果、ブラウザの表示は「13:45」となります。
更に、上から6つ目のp要素の内容は、上から3つ目のp要素の内容と同じ内容として記述したものであります。
こちらについても、「2020年10月25日13時45分」の内容をtime要素を使って書き換える場合には、<time>2020-10-25T13:45</time>と記述する必要があり、その結果、ブラウザの表示は「2020-10-25T13:45」となりました。
このため、time要素を使うことで、「2020年10月25日13時45分」等のフレーズが日時の情報であることをブラウザに認識させることはできるものの、ユーザーにとっては、見にくい（理解しにくい）表示となりました。
datetime属性の使い方
ブラウザに日時の情報を認識させつつ、見やすい表示にできるかな？
そこで、time要素のdatetime属性を使う方法を紹介します。
<body>
<p>マラソン大会は<time datetime="2020-10-25">2020年10月25日</time>に開催されました。</p>
<p>マラソン大会は<time datetime="13:45">13時45分</time>にスタートしました。</p>
<p>マラソン大会は<time datetime="2020-10-25T13:45">2020年10月25日13時45分</time>にスタートしました。</p>
</body>
time要素およびdatetime属性を使った3つのp要素を記述しました。
上から1つ目のp要素は、time要素の内容を「2020年10月25日」とし、time要素の中のdatetime属性について「2020-10-25」とする内容を記述しました。
上から2つ目のp要素は、time要素の内容を「13時45分」とし、time要素の中のdatetime属性として「13:45」とする内容を記述しました。
上から3つ目のp要素は、time要素の内容を「2020年10月25日13時45分」とし、time要素の中のdatetime属性として「2020-10-25T13:45」とする内容を記述しました。
つまり、新たに記述した3つのp要素では、ブラウザにそのまま表示させる時間の情報（「2020年10月25日13時45分」等）をtime要素の内容としつつ、「2020-10-25T13:45」等のブラウザに認識させたい時間の情報をdatetime属性の内容として記述しました。
この記述により、ブラウザの表示は見やすくなり、ブラウザにおける日時の情報の認識も正確に行えるようになりました。
【カテゴリー】パルパブル・コンテンツ、フロー・コンテンツ、フレージング・コンテンツ
time要素が属するカテゴリーは、パルパブル・コンテンツ、フロー・コンテンツ、フレージング・コンテンツになります。
パルパブル・コンテンツに属する要素は、その要素の中にhidden属性が指定されていない要素を１つ以上含める必要があります。
また、フロー・コンテンツに属する要素は、body要素の中に記述される必要があります。フレージング・コンテンツに属する要素は、テキストをマークアップするために記述される必要があります。
つまり、time要素は、以下のプログラムに示す通り、body要素の中においてテキストをマークアップするために記述され、time要素の中にhidden属性が指定されていない要素を１つ以上含めるように記述する必要があります。
<body>
<p>英語の定期テストは、月曜日の午前<time datetime="09:00">9時00分</time>に開始されます。</p>
</body>
time要素は、上のプログラムに示す通り、body要素の中でマークアップしたテキストについて、日付や時刻であることを表示するために用いる必要があります。
また、プログラムに示す通り、time要素にhidden属性を指定することなく、time要素の内容「9時00分」がブラウザに表示された状態とする必要があります。
【コンテンツ・モデル】フレージング・コンテンツ
time要素のコンテンツ・モデルは、フレージング・コンテンツです。
フレージング・コンテンツに属する要素は、文章内のテキストをマークアップするための要素です。そして、ブラウザに表示される「テキスト」も、フレージング・コンテンツに属する要素と同じように扱うことができます。
つまり、コンテンツ・モデルをフレージング・コンテンツとする要素（例えばtime要素）は、その要素の中にフレージング・コンテンツに属する要素またはテキストを含めるように記述する必要があります。
このため、time要素は、以下のプログラムに示す通り、time要素の中にフレージング・コンテンツに属する要素（例えばstrong要素）を含めるように記述する必要があります。
<body>
<p>日本代表の試合中継は、明日の午後<time datetime="19:00"><strong>19時00分</strong></time>から始まります。</p>
</body>
上に示したプログラムでは、body要素の中のtime要素において、「19時00分」のフレーズがtime要素でマークアップされています。そして、time要素の中において「19時00分」のテキストがstrong要素でマークアップされています。
このため、ブラウザの表示結果の通り、「19時00分」のフレーズについて、日付や時刻の情報であることが示されると共に重要性を付与した状態で表示することができています。
各種ブラウザでの表示結果
time要素について、主要なブラウザにおけるサポート状況は、以下の通りです。
| Google Chrome | Microsoft Edge | Safari | Firefox | Opera | |
| 【time要素】 | ◯ | ◯ | ◯ | ◯ | ◯ |
以上、time要素の使い方について、ご参考になさってください。