HTML5のidはエンコードして使おう

HTML5の話題としては周回遅れの話題だと思いますが、私は最近HTML5のidはHTML4.01の頃の制約がなくなっていたのでちゃんとエスケープやエンコードをしないと危ないと知ったという話です

現在のHTMLのid属性の値

When specified on HTML elements, the id attribute value must be unique amongst all the IDs in the element's tree and must contain at least one character. The value must not contain any ASCII whitespace.

文書内で一意で、1文字以上で、ASCII空白を含んで居なければよい

ASCII空白はU+0009 TAB, U+000A LF, U+000C FF, U+000D CR, or U+0020 SPACE.のこと

HTML4.01のid属性の値

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のid (とname) 属性の値は、英字 (A-Za-z) の何れかから始まり、続いて任意の数の英字 (A-Za-z)、数字 (0-9)、ハイフン (-)、アンダースコア (-)、コロン(:)、ピリオド(.) で構成されている必要がありました

具体的な影響

現在のHTMLのid属性の値は、HTML4.01のid属性の値を包括していますので既存のidを変更したり、今後新たなidを作る場合も運用を変える必要はありません

一方、HTML4.01の頃のまま、例えばidからリンク付きの目次を作成する処理やCSSセレクターの作成する支援する処理などがある場合は注意が必要です

例えば以下のHTML断片はHTML5では仕様に準拠しています

<p id="###">###</p>
<p id="abc?query=efg">abc?query=efg</p>
<p id="a>b{color:red;}">a>b{color:red;}</p>