2009.04.23

HTML5の特徴（後編）

イメージ：HTML5の特徴（後編）

一歩先のWeb標準 ♯24
ゆう（我的春秋）

こんにちは！　なんだか最近、わずかづつですが、HTML5に関する話題を目にする機会が増えてきたような気がしませんか？

さて、誌面……もとい、字数の関係で紹介しきれなかった項目もたくさんありますが、語彙の特徴は今月でいったんひと区切りつけます。

figure +legend要素（図表とキャプション）

HTML5では新たにfigure要素が設けられ、キャプション用としてlegend要素が利用できるようになります。これまでdiv.figure > p.captionで図版とキャプションをマークアップしてきたというような方には朗報といって良いでしょう。

<p><a href="#1">図1のサンプル画像</a>を見てみると...</p>
<figure id="1">
    <img src="image.png" alt="サンプル画像">
    <legend>サンプル画像</legend>
</figure>

figure要素が内容として持てるのは、flow content（ブロック要素）と、任意でlegend要素1つまでというのが決まりです。（legend要素の配置はflow contentの前でも後でも可。）flow contentには、もちろん画像に限らず、以下のようなコードや、表、引用文、動画など、幅広いコンテンツを充てられます。

<figure id="2">
    <legend>自動連番図表番号（CSS）</legend>
    <pre>figure {
    counter-increment: figure; 
}
figure legend:before {
    content: "figure " counter(figure) ": "
}</pre>
</figure>

なお、上に掲げたサンプルコードは、図表番号を自動連番で振ることができるCSSコードです。ただ、例示しておいて否定するのも何ですが、管理の利便性や互換性の問題などを考慮すれば、図表番号はCSSではなく、サーバーサイドプログラムかJavaScriptで管理した方が何かと都合が良いでしょう。

こぼれネタ: id属性の仕様も若干変更

上のコードのid（"1", "2"）、実はこれまでのHTML4.01やXHTML1.xなら不正な値にあたることに気づきましたか？これまでidの値は、必ず大文字もしくは小文字のアルファベット（A〜Zやa〜z）で始まらなくてはいけませんでした。

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").（HTML4.01 - 6.2 SGML basic types）

HTML5のid属性では、空白文字を含まない、1文字以上の文字列であれば、特に文字に関する制限はないようです。ただ、記号やマルチバイト文字までもが、今後もこのまま自由に許容されるのかどうかについては、セキュリティや後方互換性の点で、もう少し推移を見まもる必要があるかもしれません。

The id attribute represents its element's unique identifier. The value must be unique in the element's home subtree and must contain at least one character. The value must not contain any space characters.（HTML5 - 3.3.3.1 The id attribute）

なお、idについてはこんなことも書かれています。

Identifiers are opaque strings. Particular meanings should not be derived from the value of the id attribute.（HTML5 - 3.3.3.1 The id attribute）

簡単にいえば、idは意味を持たない不明瞭な文字列であることが望ましく、これまでのたとえばid="header"のような、特定の意味が導出できるものは好ましくないとしています。