HTML5で追加されたtimeタグ。
その使い方とdatetime属性の役割について詳しく解説していきます。
timeタグについて
timeタグは日時を表すタグとなります。
主に検索エンジンに日時を示すために使用されるタグとなり、使用する事でSEO的にも効果があり、検索結果順位が上がるとも言われています。
また、後程解説するdatetime属性を合わせて記述する事で、検索結果のスニペットに日付が表示されるようになります。
利用できる属性について
timeタグで利用できる属性は以下となります。
- datetime
- title
- class
- id
日時を表すdatetime属性や、カーソルを合わせた時にツールチップ表示されるtitle属性などがあります。
timeタグの使い方
次に、timeタグの基本的な使い方を解説していきます。
実際のコードは以下のようになります。
<p>
日時：<time>2024年12月12日 10:00</time>
</p>上記のようにtimeタグで囲うだけとなります。timeタグは日時を表す部分だけを囲うようにしてください。
※日時を表す部分 → 日時表示だけではなく、物事、場所などの日時に直接関係するものでも大丈夫です。
timeタグ自体には見た目に変化ありません。検索エンジンに対して日時を示す為のタグとなります。
datetime属性について
timeタグはdatetime属性を記述する事で検索エンジンに対して日時を伝える事が出来ますので、datetime属性と一緒に使用される事がほとんどとなります。
datetime属性の使い方は以下のようになります。
<p>
日時：<time datetime="2024-12-12 10:00">2024年12月12日 10:00</time>
</p>上記例では、datetime属性に「2024-12-12 10:00」と記述する事でtimeタグで囲った部分の日時を伝える事が出来ます。
また、timeタグで囲った部分は下記のような日時以外でも利用できます。
<p>
次回の<time datetime="2024-07-01">イベント</time>をお楽しみに！
</p>上記の記述では、イベントが「2024年7月1日」という事を示しています。
datetime属性に記述できる日付の表し方はいくつかありますので下記にまとめておきます。
datetime属性の日付の表し方
年月
2024-01
年月日
2024-10-01
日時
2024-10-01 10:00
2024-10-01 10:00:30
2024-10-01T10:00
2024-10-01T10:00:30
※日付と時刻を半角スペースまたはTで区切る
時刻
10:00
10:00:30
所要時間などの期間
2h 30m 40s
PT2H30M40S
※どちらも2時間30分40秒を示しています。
他にもいくつか表示の仕方はありますが、主要なものを紹介させていただきました。
さいごに
いかがでしたでしょうか。
適切にtimeタグ、datetime属性を使用する事でSEO効果も期待できるものとなります。
ブログ等では記事の公開日時などに利用できますので、積極的に利用していきたいタグとなります。
