<time> 日付や時刻を正確に示す

<time>タグの説明

<time>は、24時間制の時刻、またはグレゴリオ暦の日付を正確に表す際に使用します。日時を記述する際に、必ず<time>を使用しなくてはならないというわけではありませんが、コンピュータやブラウザに正確な日時を理解させる目的がある場合に有効です。

日付や時刻は、datetime属性で指定するか、<time>の範囲内に記述して提供します。日付や時刻を表すには、目的に応じたデータフォーマットを使用します。タイムゾーンの考慮が必要なコンテンツについても、適切な形式で記述する必要があります。

<time>タグの特徴

• レイアウトの初期値はインラインです。文章の改行には影響を与えません。
• 視覚的な効果は特に与えられません。この要素に加えた属性の値も、初期値では可視化されません。
• 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることは不適切です。

<time>に指定できる主な属性

datetime

日付や時刻を目的に応じたデータフォーマットを用いて指定します。

• 2045（年）
• 2045-10（年月）
• 2045-10-10（年月日）
• 10-10（月日）
• 18:36（時刻）
• 18:36:48（時刻秒）
• 2045-10-10T18:36:48（ローカル）
• 2045-10-10 18:36:48Z（グローバル）
• など、詳細はISO8601を参照して下さい。

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

<time>の使い方とサンプル

このタグを使ったマークアップのサンプルです。以下のような形式が有効なものとなります。

<time>2045-10-10</time>
<time datetime="2045-10-10">彼の誕生日</time>

<time>12:00:00</time>
<time datetime="12:00:00">ライチタイム</time>

<time>2045-10-10T10:00+09:00</time>
<time datetime="2045-10-10T10:00+09:00">日本時間19時</time>

以下のように、内容に加えて正確な日時情報を伝えることができます。これは特に機械的な解釈を提供する手段として有効です。

<article>
	<header>
		<h1>記事のタイトル</h1>
	</header>
	<section>
		<p>記事の内容。記事の内容。記事の内容。</p>
		<p>記事の内容。記事の内容。記事の内容。</p>
		<p>記事の内容。記事の内容。記事の内容。</p>
	</section>
	<footer>
		公開日：<time datetime="2045-10-10T18:36Z">2日前</time>
		<address>
			<a href="#####">お問い合わせ</a>
		</address>
	</footer>
</article>