<time>タグの解説
<time>
は、時刻や日付を正確に表すために使用します。該当する内容は、24時間制の時刻、グレゴリオ暦の日付、あるいは有効な期間です。これらの情報が記載されている場合、必ずしも<time>
を使用しなくてはならないというわけではありませんが、コンピュータやブラウザに正確な情報を伝えたい場合は有効です。
時刻や日付は、datetime
属性の値に指定するか、<time>
要素の範囲内に記述する形で提供します。この情報を正確に表すためには、目的に応じたデータフォーマットを使用します。タイムゾーンの考慮が必要なコンテンツについても、適切な形式で記述する必要があります。
<time>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 視覚的な効果は特に与えられません。この要素に加えた属性の値も、初期値では可視化されません。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることは不適切です。
<time>要素に指定できる属性
datetime
- 時刻や日付を目的に応じたデータフォーマットを用いて指定します。詳細はISO8601を参照して下さい。
年 2045 年月 2045-10 月日 10-10 年月日 2045-10-10 時刻 18:36 時刻秒 18:36:48 ローカル 2045-10-10T18:36:48 グローバル 2045-10-10 18:36:48Z - グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<time>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。このタグで囲う範囲には時間に関する内容が含まれるはずです。
<time>時間に関する内容</time>
文字列そのものが時刻や日付を示すフォーマットで書かれている場合は、以下のように記述するだけで有効となります。
<time>2045-10-10</time>
表面的に書かれている文字が、何らかの時刻や日付を表しているとき、それをコンピューターやブラウザが認識できる形で提供できます。datetime
属性に与えられた値は画面には表示されませんが、バックグラウンドの処理に役立つ情報として扱えます。
// 時刻を表す例
<time datetime="12:00:00">ライチタイム</time>
// 日付を表す例
<time datetime="2045-10-10">彼の誕生日</time>
// 正確なフォーマットを与える例
<time datetime="2045-10-10T10:00+09:00">日本時間19時</time>
これら二つの表記方法は文脈によって使い分けて下さい。人間が読みやすい情報とコンピューターが処理しやすい情報を上手に組み合わせましょう。
もうすぐ<time>12:00:00</time>です。
もうすぐ<time datetime="12:00:00">ライチタイム</time>です。
<time>2045-10-10</time>にパーティを開きます。
<time datetime="2045-10-10">彼の誕生日</time>にパーティを開きます。
観測履歴:<time>2045-10-10T10:00+09:00</time>
観測履歴:<time datetime="2045-10-10T10:00+09:00">日本時間19時</time>