日付や時刻の表示

日付や時刻を表示するときには、「<time> 〜 </time>」の中にテキストを記入します。

time要素に含める値は、日時を示すものであれば、どのようなフォーマットでも大丈夫ですが、機械的に読み込み可能な書式となっていない場合には、datetime属性にコンピュータが理解できるフォーマットで日時を示します。

datetime属性の書式

datetime属性は機械的に読み込みできるように、国際的に定められた規格に従わなければなりません。また、timeタグに記入したテキストが機械的に判読できない場合は必ずdatetime属性を指定する必要があります。

datetime属性は次の書式で記入します。

datetime=”年年年年-月月-日日T時時:分分:秒秒±時差”

たとえば、以下のようなコードとなります。

//今日の日付を指定①
<time datetime="2021-10-23">今日</time>

//今日の日付を指定②
<time datetime="2021-10-23">令和3年10月23日</time>

//日時を指定（日本時間15:23）
<time datetime="2021-10-23T15:23-0900">令和3年10月23日午後3時23分</time>

timeタグの使用例

使用例①

<article>
  <h1>timeタグとは</h1>
  <p>timeタグは日時を表示したいときに使用します。</p>
  <footer>記事公開日：<time datetime="2021-10-23">2021年10月23日</time></footer>
</article>

使用例②

<html lang="ja">
  <head>
    <title>ページのタイトル</title>
  </head>
  <body>
    <p>僕は<time datetime="2021-10-22">昨日</time>、スーパーでトマトを買ってきました。</p>
    <p>今日の<time datetime="2021-10-23T12:00-0900">お昼</time>にパンと一緒に食べます。</p> 
  </body>
</html>