ウェブランサー

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

取り扱い HTML5から追加された要素
カテゴリ フロー・コンテント
フレージング・コンテント
パルパブル・コンテント
親にできる要素 フレージング・コンテントが期待される場所
子にできる要素 フレージングコンテンツ。ただしtime要素を子孫にしてはならない。
対応ブラウザ <time>の対応状況を確認する

<time>タグの説明

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

日付や時刻は、datetime属性で指定するか、<time>〜</time>の範囲内に記述して提供します。

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

<time>タグの特徴

datetime属性を持たないtime要素内には、子要素を置いてはいけません。time要素のコンテンツは、datetime属性があればその値となり、なければ<time>〜</time>内に書かれた文字列となります。

<time>タグに指定できる属性

datetime属性
日付や時刻を目的に応じたデータフォーマットを用いて指定します。
pubdate属性
親要素の<article>、または、ドキュメントの公開日時を表します。

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

<time>を使ったマークアップのサンプルです。

HTML
有効なデータ形式
<time>2016-11-11</time>
<time datetime="2016-11-11">彼の誕生日</time>

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

<time>2011-09-01T10:00+09:00</time>
<time datetime="2011-09-01T10:00+09:00">日本時間19時</time>
HTML
<article>
	<h1>記事のタイトル</h1>
	<p>記事の内容。テキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキスト。</p>
	<footer>
		公開日:<time datetime="2020-10-10T18:36Z">2日前</time>
		<address>内容に関する問い合わせは:<a href="yurblog.com">YourBlog.com</a>にお寄せ下さい。</address>
	</footer>
</article>

<time>に関連するHTMLタグ

テキストの意味付け要素
<a> リンクを指定する
<abbr> 略語(頭字語以外)であることを表す
<b> 文字を太文字にする
<br> 改行を行う
<bdi> ページの書字方向とは別の書字方向を指定する
<bdo> 書字方向を指定する
<cite> 出典先、参照先を表す
<code> プログラムやスクリプトとして扱う
<dfn> 定義用語として扱う
<em> 強調する
<i> 文字を斜体(イタリック)にする
<kbd> キーボード入力される文字であることを示す
<mark> 文章内のテキストをハイライトして目立たせる
<q> 引用文であることを表す(短文用)
<rb> ルビをふる文字を指定する
<ruby> ルビの範囲を指定する
<rp> ルビを囲む記号を指定する
<rt> ルビの内容を指定する
<rtc> ルビテキストの集まりを指定する
<s> 正確ではなくなった内容であることを表す
<samp> プログラムによる出力結果のサンプルとして扱う
<small> 細則のような付帯注釈を表す
<span> インライン要素としての範囲を指定する
<strong> 重要な情報として扱う
<sub> 下付き文字として表示する
<sup> 上付き文字として表示する
<time> 日付や時刻を正確に示す
<u> 文字に下線(アンダーライン)を引く
<var> 変数や引数として扱う
<wbr> <nobr>内での改行位置の指定(NN独自)