|
|---|
この連載が本になりました！
「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き!
HTML5マークアップ 現場で使える最短攻略ガイド
定価：2,808円 （本体2,600円）／形態：B5変 (240ページ)
ISBN：978-4-04-866070-9
HTML5では、セクションに関連する要素以外にも、新しい要素が追加されたり、意味が変更されたりしています。今回から数回にわたって、HTML5で新たに登場する要素や、変更された要素について解説します。第6回は、一般的なWeb制作で使用頻度の高い要素と、ルビ関連の要素を取り上げます。
各要素の解説では、冒頭に「カテゴリー」と「コンテンツモデル」という項目が登場します。カテゴリーとコンテンツモデルについては、第5回を参照して復習してください。
また、HTML5で重要な役割を持つセクション関連要素に関しては、第4回で詳しく解説しています。
HTML5のグローバル属性
以降の解説で登場する「グローバル属性」とは、すべての要素で使用できる属性のことを表します。HTML5のグローバル属性には、以下のものがあります。
accesskey class contenteditable contextmenu dir draggable dropzone hidden id lang spellcheck style tabindex title 独自データ属性（data-*）
また、本稿の域を出てしまうので詳細は割愛しますが、JavaScriptで使用するイベントハンドラー（onclickやonsubmitなど）や、ARIAのroleとaria-*などもグローバル属性です。
使用頻度の高い要素
使用頻度の高い要素として、time要素、figure要素、figcaption要素、mark要素の意味と使い方を紹介します。
time要素
- カテゴリー：フローコンテンツ、フレージングコンテンツ
- この要素が使える文脈：フレージングコンテンツが予想される場所
- コンテンツモデル：フレージングコンテンツだが、time要素は入れられない
- コンテンツ属性：グローバル属性、datetime、pubdate
time要素は、日時を表す要素です。time要素の日時は、規定のフォーマットに従ってマークアップする必要があります。具体的には、次のようなフォーマットで記述します。
<time>12:35</time>
<time>12:35:23</time>
<time>2012-01-01</time>
<time>2012-01-01T12:35:23+09:00</time>
ただ、上の2つ（時刻表示）はまだしも、下の2つ（年月日表示やタイムゾーンを含む書式）は、実際のWebサイトにはあまり適していないと感じるかもしれません。
そこで、time要素では、datetime属性を利用して、以下のように記述できます。
<time datetime="12:35">12時35分</time>
<time datetime="12:35:23">12時35分23秒</time>
<time datetime="2012-01-01">2012年1月1日</time>
<time datetime="2012-01-01T12:35:23+09:00">2012年1月1日12時35分23秒</time>
datetime属性に規定のフォーマットに従った値を入れると、要素の内容は自由に記述できます。以下のような書き方もできます。
<time datetime="2011-12-31T23:59:59">去年の大晦日、午後11時59分59秒</time>
<time datetime="17:30">イチナナサンマル時</time>
<time datetime="1980-09-09">私の誕生日</time>
このように、datetime属性を使えば、さまざまな日時表現をマークアップできます。
ただし、W3C Working Draft 25 May 2011時点のtime要素仕様では、「正確ではない日時は記述できない」とされています。仕様書には例として、
"one millisecond after the big bang", "the early part of the Jurassic period", or "a winter around 250 BCE"
（訳：ビッグバンの1ミリ秒後、ジュラ紀の初期、紀元前250年頃の冬）
が挙げられています。
ポイント
「2012-01-01T12:35:23+09:00」のような書式には、馴染みの薄い方もいるかもしれません。一見すると複雑そうに見えますが、「年-月-日T時:分:秒タイムゾーンオフセット」のように、
- 年月日はハイフン（-）で繋ぐ
- 年月日と時刻は大文字のTで繋ぐ
- 時分秒はコロン（:）で繋ぐ
- タイムゾーンオフセットは+09:00（日本などの場合）
というルールになっています。
不慣れな場合は、(X)HTML5 validation resultsなどでチェックをするとよいでしょう。
time要素にはpubdate属性が付けられます。pubdate属性を付けたtime要素は、もっとも近い先祖のarticle要素の発行日時を表します。article要素が無い場合は、文書全体の発行日時を表します。
pubdate属性が付いたtime要素では、日付が必須です。以下のように、時刻のみのtime要素には、pubdate属性を指定できません。
誤った例
<time datetime="12:35" pubdate="pubdate">12時35分</time>
正しい例
<time datetime="2012-01-01" pubdate="pubdate">2012年1月1日</time>
また、pubdate属性が付いたtime要素は、自身が発行日時を示す先祖（article要素か、文書全体）に1つしか存在できません。
pubdate属性は論理属性です。論理属性とは、「あり、なし」のみを指定する属性で、input要素のchecked属性や、time要素のpubdate属性などが該当します。HTML5で論理属性を記述するときには、次の3つの書式が使用できます。
<time datetime="2012-01-01" pubdate="pubdate">2012年1月1日</time>
<time datetime="2012-01-01" pubdate>2012年1月1日</time>
<time datetime="2012-01-01" pubdate="">2012年1月1日</time>
どれを使っても構いませんが、運用面を考えると複数の書式が混在しないほうが無難でしょう。
ポイント
本記事は、「W3C Working Draft 25 May 2011」の仕様をもとに説明していますが、「Editor's Draft 7 March 2012」ではpubdate属性が削除されているほか、これまでは許されていなかった、“西暦のみ”“月日のみ”といった表記が認められるなど、多くの仕様が変更されています。今後もさらに変更される可能性があるため、実務でtime要素を使用する際には「変更があり得る」ことを意識しておきましょう。
