株式会社グルコム
Web関連

HTML5で追加された日時を表す要素、TIME要素とは?


140310

HTML5で追加されたTIME要素は日時を表す要素で、例えば以下のように利用します。

<time>2014-02-14</time>

このTIME要素で括った日付は“日時値”というモノとして扱われます。「そんなもん見りゃ解るだろ?」とお思いかもしれませんが、これはコンピュータに「これは日付ですよ〜、数字の羅列じゃありませんよ〜」と伝えるためのものなのです。ですから、日時値は人間様にとっては割と面倒な書き方をしなくてはならなくなります。HTML5.jpさんのところで解説されている日時値のサンプルを見る限り、以下のような日時値が指定できるようです。

// 年月日
2014
2014-02
2014-02-14

// 時刻
12:00
13:30:45

// 日時
2014-02-14 14:50:55

しかし、このような書式しか認められないとすると、TIME要素はとても使い辛い要素となってしまいます。日本だったら“2014年2月14日”というような書き方をしたい時もありますものね。そこでTIME要素には“DATETIME属性”というものが設定できます。

<time datetime="2014-02-14">2014年2月14日</time>

TIME要素は、DATETIME属性が設定されていればDATETIME属性の内容が、datetime属性が無ければTIME要素で括られたテキストが、日時値となります。ですから、以下のような記述も可能です。

<time datetime="2014-02-14">2月3週目の金曜日</time>

と、ここまでTIME要素について大雑把に説明してきましたが、これをどのように使えば良いのでしょうか? 日時を表すテキストを片っ端からTIME要素でマークアップするのは流石に面倒ですし、実際のところあまり意味無いように感じます。この要素はコンピュータ(というかHTMLを処理するソフトウェア)に「日付なのです!」と解らせる為のものですから、日付であることを理解してほしい部分だけに利用すれば良いのではないでしょうか。例えば・・・、

  • ブログエントリの公開日の部分。
  • イベント告知ページの開催日の部分。
  • カレンダーなら日付のテキストは全部。

というような感じです。ですから、

<time datetime="2013-02-14">去年</time>も0個でした。<time datetime="2014-02-14">今年</time>は貰えるかなぁ・・・。

みたいにいちいちTIME要素でマークアップする必要は無いと思われます。Webページを処理するソフトウェアに渡すヒントのつもりでマークアップしておけば良いのではないでしょうか。

尚、本文中に記載した日付に深い意味はありません。意味なんて無いってばよ。

株式会社グルコムについて

私たちは、ウェブ制作・ウェブマーケティングサービスを提供して、12年以上の実績がある会社です。 これまでの経験を活かし、ウェブ制作・運用・集客・SEO対策や、セミナー・ウェブ担当者向け教育サービスなどをお客様にご提供しています。