HTML5 <abbr>
<time>タグは、日付や時刻を表記する際に、グレゴリオ暦による日付や24時間表記の時刻で正確に示す際に使用します。 日時を記述するのに、必ず<time>を使用しなくてはならないわけではなく、コンピュータやブラウザが理解できるように日時を示すことが目的です。
timeタグは、検索エンジンに向けて時間や日にちを示す要素です。
検索結果の上位表示やスニペットに日付が表示されるというSEO対策として有効です。
検索結果の上位表示やスニペットに日付が表示されるというSEO対策として有効です。
<time>タグは、正確に特定できない日付や時刻に対して使用するべきではありません。 例えば、ビッグバンの1ミリ秒後、ジュラ紀の初期、紀元前約250年の冬、といった時を示すのに、<time>タグを使用するのは不適切です。
現在、一般的に利用されている西暦はグレゴリオ暦ですが、グレゴリオ暦は1582年2月にローマ教皇グレゴリウス13世によって制定されたものです。 <time>タグは、グレゴリオ暦導入以前の日付には使用しないことが推奨されています。
また、日本では明治5年（1872年）にグレゴリオ暦が導入されていますが、国によって16世紀～20世紀初頭と導入時期が異なります。 グレゴリオ暦からの日付や時刻の変換には十分な注意が必要です。
datetime属性は、日付や時刻を指定します。もし、datetime属性を省略する場合には、<time>～</time>の中に日付や時刻を記述します。
■HTML4.01からHTML5へのバージョンアップによる変更点
<time>は、HTML5から新たに追加された要素です。
■属性
datetime属性
日付や時刻を指定する
日付や時刻を指定する
■使用例
<p>
私の購入したバイクが納品されたのは、曇った<time datetime="1978-11-2">祝日の文化の日の前日</time>だった。<br>
その日のうちにハンドルだけ前傾姿勢になるバーハンドルに交換した。
</p>
<p>
ノーマルのハンドルでは直立姿勢で白バイ隊員の運転姿勢みたいになるので、ちょっとだけレーサースタイルみたいに前傾になるハンドルに変更した。
</p>
<p>
明日は、<time>13:00</time>に、横浜公園で開催しているバザールに行く予定だ。
</p>
私の購入したバイクが納品されたのは、曇った<time datetime="1978-11-2">祝日の文化の日の前日</time>だった。<br>
その日のうちにハンドルだけ前傾姿勢になるバーハンドルに交換した。
</p>
<p>
ノーマルのハンドルでは直立姿勢で白バイ隊員の運転姿勢みたいになるので、ちょっとだけレーサースタイルみたいに前傾になるハンドルに変更した。
</p>
<p>
明日は、<time>13:00</time>に、横浜公園で開催しているバザールに行く予定だ。
</p>
上の例では、<time>タグにdatetimr属性を記述することで「1978年11月2日」という日付を検索エンジンに認識させているということになります。
ブラウザ上ではここで記入したdatetimr属性の"1978-11-2"は表示されず、検索エンジンのindexに認識させるためだけに記述します。
ブラウザ上ではここで記入したdatetimr属性の"1978-11-2"は表示されず、検索エンジンのindexに認識させるためだけに記述します。
↓↓↓
ブラウザ上の表示
私の購入したバイクが納品されたのは、曇っただった。
その日のうちにハンドルだけ前傾姿勢になるバーハンドルに交換した。
ノーマルのハンドルでは直立姿勢で白バイ隊員の運転姿勢みたいになるので、ちょっとだけレーサースタイルみたいに前傾になるハンドルに変更した。
明日は、に、横浜公園で開催しているバザールに行く予定だ。
■timeタグの具体的使用例
①年月
2020-11
②日付（年月日）
2020-11-21
③時刻だけ
10:00
10:40:15（秒あり）
10:40:15（秒あり）
④日付と時刻
日付と時刻の間は、半角スペースもしくは「T」を記述します。
日付と時刻の間は、半角スペースもしくは「T」を記述します。
2020-11-21 10:00
2020-11-21T10:00
2020-11-21T10:00
⑤週
2020-W42
⑥期間
所要時間を記載するときに使用されることが多いです。ちなみに以下は両方とも「5時間40分15秒」という意味です。
所要時間を記載するときに使用されることが多いです。ちなみに以下は両方とも「5時間40分15秒」という意味です。
5h 40m 15s
PT5H40M15S
PT5H40M15S
timeタグとdatetime属性を併用すると、上記のような表し方ができます。
基本的に日付は「-」（ハイフン）で繋ぎ、時間は「：」（コロン）で繋ぎます。
基本的に日付は「-」（ハイフン）で繋ぎ、時間は「：」（コロン）で繋ぎます。
■使用例
<p>私は<time datetime="2020-08-20">2020年の夏</time>、ドライブに行きました。</p>
<p>明日の<time datetime="2020-11-21 12:00">ランチ</time>は「〇〇ドライブイン」に集合です。</p>
<p>箱根の大観山の駐車場までの所要時間は<time datetime="2h 30m">2時間30分</time>です。</p>
<p>明日の<time datetime="2020-11-21 12:00">ランチ</time>は「〇〇ドライブイン」に集合です。</p>
<p>箱根の大観山の駐車場までの所要時間は<time datetime="2h 30m">2時間30分</time>です。</p>
↓↓↓
ブラウザ上の表示
私は、ドライブに行きました。
明日のは「〇〇ドライブイン」に集合です。
箱根の大観山の駐車場までの所要時間はです。
