[25] 新しい要素 time で正確な日時を記述しよう

HTML5から新たに加わった <time>要素で 正しい日時をマークアップしましょう。
前回使った「datetime属性」が、この要素でも重要ですよ。

使用する要素	<time> 〜 </time>

<time>要素は「正確な日付や時刻を示す」要素です。
人間用というよりコンピュータ用で、コンピュータに正しい日時をゲットさせます。
それによって日付や時間に関連する各種ウェブサービス（検索エンジンのクローラとか、ユーザーのカレンダーとか）へ、正しい情報を与えることができます。

<time>の基本のカタチ

<time>要素は、日付や時間を書くときに必ず使わなきゃならないわけでなく「ブラウザや検索のクローラに正確な日時を読み取らせたい」ところに使う。
なので、コンピュータに読み取り可能な書き方で日時を書いてあげなければ無意味です。

基本の使い方はこんなかんじ。<time> と </time> で囲むだけです。

<time>2011-10-01</time>（日付のみ）
<time>12:00</time>（時間のみ秒数無し）
<time>12:00:00</time>（時間のみ秒数有り）
<time>2020-10-01T12:00:00</time>（日付と時間（秒数有り））
<time>2020-10-01T12:00:00+09:00</time>（日付と時間（秒数有り）とタイムゾーン）

日付と時間とタイムゾーンの表記方法

コンピュータが正しい日時をゲットするために「日時の表記方法」は下記のように決まっています。年月日だけ（緑の部分）、時間だけ（ピンクの部分）でもOKです。

YYYY-MM-DDThh:mm:ssTZD

YYYY-MM-DDは年月日です。
年はグレゴリオ暦（西暦）の4桁。月も日も数字の2桁で表します。

ちなみに、グレゴリオ暦以前（1582年2月23日以前=ユリウス暦）の日時は、グレゴリオ暦に換算すると間違った表記になる場合があるので、datetime属性で使うのは非推奨だって。
（1582年は本能寺の変の年。使わないよなあ〜。タイプミスに注意ってことでしょうね）

このあと「時間表示」を続けるなら、大文字の「T」で区切ってから書きます。

hh:mm:ss で 時分秒 を表します。
これは24時間表記で 時分秒 は数字の2桁で表します。

最後のTZD は タイムゾーンを表します。
これは協定標準時に対して何時間進んでる（または遅れている）地域かを示すもので「+hh:mm」か「-hh:mm」と書きます。
グローバルな時間を表示したい時に使うので、国内だけの情報なら無くてもOK。

0（協定標準時ジャスト）の地域は Z だけ書けばイイことになってます。
（イギリス・アイルランド・ポルトガル・モロッコなど西アフリカの国々が Z だけでいいみたい）

日本は協定標準時より9時間進んでる（早い）ので +09:00 と書きます。

例えば、2020年8月15日の午後8時ジャストの日本での日時表示はこうなります。

2020-08-15T20:00:00+09:00

協定標準時とは、UTC（Universal Time, Coordinated）のこと。
かつてはグリニッジ標準時（Greenwich Mean Time, GMT）が世界標準時だったけど、今はセシウム原子時計による国際原子時を元にしたUTCが協定標準時なんだそうです。
世界のタイムゾーン（協定標準時からどんだけズレてるか）を示したマップ（PNG画像）を見つけたので貼っておきます。 →Wikipedia : ファイル:Timezones2010.png

datetime属性で人間とコンピュータで共用

<time>要素の内側に書く日付や時間は、「2020-10-01T12:00:00+09:00」などと書くのではなく、人間用に「2020年10月1日正午」などと書きたいですよね。

でもこの書き方ではコンピュータには理解できないので、datetime属性を使います。

datetime属性を入れた場合のサンプルです。

開始時間は<time datetime="2020-10-01T12:00:00+09:00">2020年10月1日正午</time>です。

このように、日付だけ、時間だけで書くこともできます。

お申込締切は<time datetime="2020-10-02">2020年10月2日</time>の
<time datetime="20:30">20時30分</time>までとなっております。

「pubdate属性」は HTML5仕様から削除されました

<time>で使用される予定だった「pubdate属性」は、HTML5 仕様から削除されました。 http://www.w3.org/TR/html5/text-level-semantics.html#the-time-element

「pubdate」は「public date」の略。公開の日時。
この属性を使うと、<time>要素が含まれる<article>要素の「公開日時」を表し、 <article>要素がない場合はHTML文書全体の公開日時になるってものだったらしい。

次回予告

次回は、<cite>要素を使ってみましょう。
<cite>要素は参照した作品のタイトルを表す要素です。
「cite属性」と似ててややっこしいけど、あっちは属性、こっちは要素です。