『time要素』 / HTML5新要素一覧　

time要素の削除

※【重要】 time要素はHTML5の要素から削除されました。記事はこのまま残す予定ですが、実際のコーディング時に使用しないように注意してください。
※【重要】 time要素はHTML5の要素から１度削除されましたが、再定義され要素が復帰しました。そこで、近日中にtime要素を新たな仕様に対応した形で書き直しさせていただきます。（2011年11月現在）

time要素

グレゴリオ暦における日付や24時間表記の時刻を正確に表す為に使用します。

time要素の特徴

time要素は、正確な日時をブラウザーやロボットなどが読み取れるようにすることを想定して用意されています。また、time要素は属性値の末尾にタイムゾーン・オフセット(世界時からの時差)を追加することも可能です。

尚、time要素を使用する場合に注意点がいくつか存在します。

• タイムゾーン・オフセットは日付と時刻両方の指定がされた場合にのみ付けることができます。
• time要素にdatetime属性を記述しない場合は、要素内に決まったフォーマット以外の情報は表示できません。
• time要素にpubdate属性を指定した場合は、article要素の中に2つ以上存在してはいけません。また、article要素の外で使用した場合も2つ以上存在してはいけません。

このようにtime要素にはいくつかの注意点があるので使用時にはこれらに気をつけなければなりません。

time要素の基本的なマークアップ方法

time要素の基本的なマークアップ方法をサンプルソースにまとめながら確認していこうと思います。

【日付の表示 】

<time>2011-03-09</time>

【時刻の表示 （秒数無し）】

<time>15:05</time>

【時刻の表示（秒数有り） 】

<time>15:05:38</time>

【日付と時刻の表示（秒数有り） 】

<time>2011-03-09T15:05:38</time>

【日付と時刻（秒数有り）とタイムゾーン・オフセットの表示 】

<time>2011-03-09T15:05:38+09:00</time>

最後のサンプルにタイムゾーン・オフセットを追加したものを記述しましたが、注意点の1つにタイムゾーン・オフセットを追加する場合は日付と時刻の指定がないといけないとありました。このサンプルでは両方の指定があるのでタイムゾーン・オフセットを追加できることが確認できます。

time要素のdatetime属性について

日付を表示する場合に、今までのサンプル”2010-03-09”のようにハイフンで区切るのではなく”2010年03月09日”と年や月で表示したい場面もあると思いますが、time要素で”2010年03月09日”を囲ってもエラーになってしまいます。これは注意点にもありましたdatetime属性を記述しない場合は、要素内に決まったフォーマット以外の情報は表示できないに関わってきます。

つまり、上記のサンプルのようなハイフンやコロンで区切られたフォーマットではなく、漢字等を使用した表記だとエラーになってしまうということです。そこでそれらを回避するためにdatetime属性を使用します。

では、time要素のdatetime属性について理解するため、こちらもサンプルソースにまとめながら確認していこうと思います。

【日付の表示を変更 】

<time datetime="2011-03-09">2011年03月09日</time>

【時刻の表示を変更】

<time datetime="15:05">15時05分</time>

【関連情報の表示 】

<time datetime="2011-03-09T15:05:38">友達の誕生日</time>

このようにdatetime属性に日付や時刻を入れることで、time要素は決まったフォーマット以外の形でもマークアップすることが可能です。

pubdate属性について

最後にtime要素のpubdate属性についても学びたいと思います。

pubdate属性は、time要素に指定することで親にあるarticle要素の投稿日時を表すことができます。もし、親にarticle要素が無い場合は全体の投稿日時を表すことになります。ただし、ここでも注意点があります。

time要素にpubdate属性を指定した場合は、同じarticle要素の中に2つ以上存在してはいけません。また、article要素の外で使用した場合も2つ以上存在してはいけないということでした。これは例えば、一つの記事を投稿した場合に、記事の投稿日が2つ以上あるのはおかしいという納得の理由だと思います。

【pubdate属性を指定】

<time datetime="2011-03-09T15:05:38+09:00"  pubdate="pubdate" >この記事の投稿日時</time>

以上でtime要素の勉強を終わろうと思いますが、time要素にdatetime属性を記述しない場合は、要素内に決まったフォーマット以外の情報は表示ができないとういことを知らずに、このブログ制作時に凄い混乱したのを思い出しました・・・。

こうして勉強することで理解が深まってよかったです。

参考サイト：

• time 要素　【HTML5.JP】

今回の記事で参考にした本

徹底解説HTML5マークアップガイドブック

HTML5の新要素や基本的なマークアップ方法について丁寧に解説が書かれています。
HTML5でサイトを構築する際やこのBlogの記事を書く時の参考にしています。他にもビジュアル系API編もcanvas要素の勉強用に持っています。

徹底解説HTML5マークアップガイドブック
最終草案対応版―全要素・全属性完全収録

「最終草案対応版―全要素・全属性完全収録」としてverが変わりました。すでに同じ本を持っている場合は追加で買わなくても大丈夫だとおもいましたがなにがなくなって追加されたか興味がありましたので両方買って見ました。

ブログを作成する際に参考にした本はこちらにまとめてあります。