このページの本文へ

DESIGN 浜 俊太朗のHTML5マークアップ移行ガイド ― 第6回

もうこれで迷わないHTML5新要素の使い方

2012年03月23日 11時00分更新

浜 俊太朗/NHN Japan

  • この記事をはてなブックマークに追加
本文印刷
連載インデックスへ

この連載が本になりました!

「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要素を使用する際には「変更があり得る」ことを意識しておきましょう。

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング