timeタグとは?|日付や時間を正確に表そう

timeタグとは?|日付や時間を正確に表そう
博士
今回は、<time>タグで日付や時間を表す方法を解説するぞ。
 
 
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<time>タグとは

 

<time>

対応ブラウザ
分類フロー・コンテンツ / フレージング・コンテンツ / パルパブル・コンテンツ
利用場所フレージング・コンテンツが期待される場所
内容フレージング・コンテンツ(ただし、time要素の入れ子は不可)


 
 
<time>タグは、日付や時間を表す際に使用します。
日付にはタイムゾーン(協定世界時と現地時間との差)を加えることもできます。

time要素は、コンピュータが日付や時間を読み取って、活用できるようにすることを想定したものです。
そのため、コンピュータが読み取れるよう、規定の形式に準拠する書式で日時を指定する必要があります。
 
 

  • (2016年7月)
 
 

  • 日付(2016年7月25日)
 
 

  • 時刻(13時45分30秒)
 
 

  • 日時とタイムゾーン(2016年7月25日 13時45分30秒 日本時間 +09:00)
 
 

使用例

 
 

表示例

開催日:

開始時間:

 
 

datetime属性

datetime属性を指定して、日付や時間を表すこともできます。
time要素と同様に、コンピュータが読み取れるような規定の書式で指定します。

datetime属性に指定する日時は、以下の書式で表します。

YYYY-MM-DDThh:mm:ssTZD

YYYY年(4桁)
MM月(2桁)
DD日(2桁)
T時間が始まることを表す文字です。半角スペースを入力してもOK。
hh時(2桁/00〜23)
mm分(2桁/00〜59)
ss秒(2桁/00〜59)
TZDタイムゾーン(Z, +hh:mm, -hh:mm)
Z = UTC(協定世界時)
+hh:mm = UTCよりhh時間mm分進んでいる現地時間
-hh:mm = UTCよりhh時間mm分遅れている現地時間

 
 
datetime属性で日時を指定すると、time要素の中にはdatetime属性の日時と対応している任意の内容を入れられるようになります。

 
 

スポンサーリンク

まとめ

日付や時間を表す際は、<time>タグを使用します。
 
 

博士
正確な日付や時間を定められた書式で記述しよう。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








timeタグとは?|日付や時間を正確に表そう