htmlで日付・時間の表示「time要素」HTML5

htmlで日付・時間を表示する方法は、「time要素」でマークアップします。

「time要素」は、HTML5で新たに導入された要素で、ブラウザ・検索エンジンでは正確に日時を認識できます。

「datetime属性」で、タグの中に日時のデータを入れて、マシン上は「日付・時間」を認識して、ブラウザ表示上は日本語の年月日時分で表現できます。

「time要素」のマークアップ例

下記の書式通りにマークアップします。「+09:00」は、日本の場合のグリニッジ標準時との時差を表します。時差の無い国(イギリスなど)の場合は「Z」と大文字で記載します。サマータイムを導入している国・地域の場合は、サマータイム期間中は1時間マイナスして記載します。

HTMLソース

年の場合
<time>2015</time>
年月の場合
<time>2015-07</time>
年月日の場合
<time>2015-07-17</time>
年月日時分の場合
<time>2015-07-17T16:11+09:00</time>
年月日時分秒の場合
<time>2015-07-17T16:11:59+09:00</time>
年月日時分秒1/10秒の場合
<time>2015-07-17T16:11:59.3+09:00</time>

ブラウザ表示

年の場合

年月の場合

年月日の場合

年月日時分の場合

年月日時分秒の場合

年月日時分秒1/10秒の場合

「datetime属性」のマークアップ例

上記の表示では、マシンには認識されても、ブラウザの表示上ではわかりにくいので、マシンには「datetime属性」でデータを読ませ、時を示す日本語をテキストに記載する事で、わかり易く、音声読み上げにも対応できます。

HTMLソース

<time datetime="2015-07-17T19:00+09:00">開催日時:2015年7月17日 金曜日 午後7時</time>

ブラウザ表示

HTML5 に戻る

ホームページ作成方法 TOPに戻る