【HTML】time要素の使い方【日付や時刻を表示します】

Program

time要素を使えば、ブラウザにおける日時の認識や、日時の表示ができます。

シンプルな日時の表示方法

先ず、time要素を使わずに、日時の表示を行った(記述した)例を紹介します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>time要素</title>
</head>
<body>
    <p>マラソン大会は2020年10月25日に開催されました。</p>
    <p>マラソン大会は13時45分にスタートしました。</p>
    <p>マラソン大会は2020年10月25日13時45分に決行されました。</p>
</body>
</html>

body要素の中に、「文のかたまり(段落)」を示すp要素が3つあります。

それぞれのp要素の中には、日時の情報として「2020年10月25日」、「13時45分」、「2020年10月25日13時45分」と書かれたフレーズがあります。

プログラムを見てわかる通り、各日時の情報のフレーズをp要素の内容(文章)の中に書き込んでいるため、p要素の内容としてシンプルにブラウザに表示され、ユーザーは読むことができます。

しかし、日時の情報である「2020年10月25日13時45分」等のフレーズは、日時の情報としてブラウザでは認識されず、単なるp要素の内容としてのみ認識されることになります。

time要素の基本的な使い方

次に、time要素を使って、日時を表示した例を紹介します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>time要素</title>
</head>
<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>
</html>

先ほどのプログラムに、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属性を使う方法を紹介します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>time要素</title>
</head>
<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>
</html>

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要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。

【HTML】Internet ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
time要素
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、time要素の使い方について、ご参考になさってください!

タイトルとURLをコピーしました