【初心者向け】timeタグの使い方とdatetime属性の役割を解説

HTMLで時間や日にちを表すtimeタグ

あまり使うタイミングがないため、HTMLを学び始めた初心者でtimeタグをよく理解していない人もいるでしょう。

・timeタグってどんな要素?
・datetime属性の役割は?
・timeタグの具体的な使い方を知りたい・・・。

こんな疑問を持っていませんか?

今回は、timeタグの

・基本的な使い方
・datetime属性の役割
・timeタグの使用例 

について説明します。

timeタグとは

timeタグとはどういった要素なのか、知らない初心者の方も多いのではないでしょうか。

なのでここでは、timeタグの意味や役割について詳しく解説していきます。

timeタグの読み方

timeタグは「タイム」と読みます。

「time」はその名の通り「時間」という意味で、HTMLでも時間・日にちを表すものとして使われます。

例えば、文書内で時間を表すときや、日にちを検索エンジンに示す際に使われることが多いです。

timeタグは時間や日にちを表す要素

timeタグは時間や日にちを表す要素です。

上の図のように、日時を表すために使われたり、日付がわからないテキストに日時を指定したりするときに使われます。

timeタグは、ユーザーに対して日時を示すのではなく、検索エンジンに向けて日時を示すものです。

timeタグを使用しないときに比べて、検索エンジンに日時を認識してもらうことができるので、検索順位がアップするというメリットがあります。

また、検索結果でスニペットに日時が表示されるというメリットもあり、SEO対策に繋がります。

MEMO
timeタグで必ず日時を記述しなければならない、ということはありません。

timeタグで利用できる属性

timeタグでは以下の属性を使うことができます。

属性 説明
datetime 要素に関連付けられた日時を指定する属性です。
class 要素にCSSでスタイル(見た目)を適用するためによく使われる属性です。
id class属性同様、要素にCSSでスタイルを適用するためによく使われます。同じid属性はページ内で1回しか使えません。
title 要素のタイトルを定義します。パソコンのブラウザでは、要素部分にマウスを当てると定義したタイトルが表示されます。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox 完全対応
Internet Explorer 未対応
Opera 完全対応
Safari 完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox 完全対応
Android 版 Opera 完全対応
iOS版Safari 完全対応
Samsung Internet 完全対応

timeタグの基本的な使い方

timeタグの意味や役割がわかりました。

ここからは、実際にtimeタグの使い方について解説していきます。

まだ使い方を知らない方は、ここで理解しておきましょう。

timeタグの使い方

timeタグの使い方をコードを用いて見ていきます。

実際のコードは次の通り。

使い方は簡単で、日付を表すテキストをtimeタグで囲むだけです。

今回の例だと、「2020年11月21日午前10時」というテキストが日付を表すので、それをtimeタグで囲んでいます。

結果をブラウザで表示してみると以下の通り。

特に表示に変化はなく、普通のテキストとして表示されています。

このtimeタグは、ユーザーに対して何か情報を伝えたり、示したりする要素ではありません。

しかし、検索エンジンに正確な時間や日付を認識させるために、timeタグが使用されます。

なので、今回の例では、「2020年11月21日午前10時」という日付を検索エンジンに認識させているということです。

注意
グレゴリオ暦が導入される前(1582年2月)の時間や日付は使用しないことが推奨されています。

例えば、白亜紀、紀元前1万年などのような時間を示すのは、ふさわしくないということです。

datetime属性の役割

timeタグは、datetime属性とセットで使われることが多いです。

なのでここでは、datetime属性の役割について解説します。

datetime属性は要素に関連付けられた日付を指定するものです

例えば、次の通り。

上記のコードにある「明日のランチ」というテキストは、ユーザーにとっては「いつのことなのか」が理解できるでしょう。

しかし、検索エンジン側にとっては「明日のランチ」が「いつのことなのか」認識ができません。

検索エンジンやコンピューター側に、正確な日付を認識させるために、datetime属性を指定するのです。

今回の例では、ランチの日付が「2020年11月21日の12時」であるため、「datetime=“2020-11-21 12:00”」と指定しています。

これで、検索エンジン側も「明日のランチ」がいつのことなのか認識することができました。

timeタグの具体的な使用例

timeタグとdatetime属性を使った日付の表し方には、様々な種類があります。

年月だけを表したり、時間だけを表したりと、場面によっても異なるでしょう。

なのでここでは、timeタグで日付を指定する具体的な使用例を紹介します。

①年月

2020-11

②日付(年月日)

2020-11-21

③時刻だけ

10:00
10:40:15(秒あり)

④日付と時刻

日付と時刻の間は、半角スペースもしくは「T」を記述します。

2020-11-21 10:00
2020-11-21T10:00

⑤週

2020-W42

⑥期間

所要時間を記載するときに使用されることが多いです。ちなみに以下は両方とも「5時間40分15秒」という意味です。

5h 40m 15s
PT5H40M15S

timeタグとdatetime属性を併用すると、上記のような表し方ができます。

基本的に日付は「-」(ハイフン)で繋ぎ、時間は「:」(コロン)で繋ぎます。

コードでも書き方の例を見てみましょう。

これらの表記方法で日付や時間を指定すれば、検索エンジンに認識してもらうことができます。

なので、書き方を覚えておくといいでしょう。

MEMO
24時間表記の「12:00」や12時間表記の「12:00am」、日本時間の「15時」や「午後3時」などもすべて同時刻だと認識されます。

まとめ

今回は、timeタグの意味や役割、使い方について詳しく解説しました。

timeタグは、検索エンジンに向けて時間や日にちを示す要素で、検索結果の上位表示やスニペットに日付が表示されるというSEO対策にも繋がります。

なので、今回解説したtimeタグの意味や使い方を覚えておくといいでしょう。

この記事がtimeタグの学習に役立つと幸いです。

参考文献:MDN web docs|time