XHTML 1.0との違い
XHTML 1.0と大きく違うところはモジュール化だと思います。このモジュール化というのは要素などの宣言を機能別に小分けにしたものでModularization of XHTMLにて定義されていて、モジュールを組み合わせて作られるXHTMLをXHTMLファミリーと呼びXHTML 1.1もその一員となります。
このことでHTMLの全ての要素を処理するには負担が大きいような端末では必要最小限のものを組み合わせればいいわけですし、足りなければ別に定義したものを追加することもできるわけです。
そしてモジュールの組み合わせを定義したものをドライバと呼び、XHTML 1.1のDTDもドライバとなっています。
さらにXHTML 1.0では推奨しないとされていた要素などが廃止されました。これらの要素はLegacy Moduleとして定義されていて、使用したい場合は追加する必要があります。属性の変更点としてはLang属性が廃止されxml:langのみへ、a要素、Map要素のname属性もなくなりid属性で指定する必要があります。また、新しくRuby要素が追加されました。
実際にXHTML 1.0からXHTML 1.1へ書き換える場合には文書型を<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">へ変更、html要素のlang属性とxml:lang属性をxml:langのみへ、idとname属性の両方を指定していたものをid属性のみへ、という変更を忘れないようにしましょう。Transitionalなどを使用していた場合は使用できる要素、属性に注意してください。Validatorをうまく活用すれば楽だと思います。
HTML 4.01などから書き換える場合にはXHTML 1.0 へ移行するでXHTML 1.0へ一度変更してからのほうが良いかもしれません。
モジュール一覧
XHTML 1.1で使用されるモジュールを整理しておきます。
表の中で"要素名&"というのが出てきますが、これはそのモジュールを使用したときはその要素へ属性リストを追加する、という意味です。また、"属性名*"は必須属性です。
- Attribute Collections(属性集合)
- Structure Module(構造)
- Text Module(テキスト)
- Hypertext Module(ハイパーテキスト)
- List Mudule(リスト)
- Presentation Module(プレゼンテーション)
- Edit Module(編集)
- Bi-directional Text Module(双方向テキスト)
- Forms Module(フォーム)
- Tables Module(テーブル)
- Image Module(イメージ)
- Client-side Image Map Module(クライアントサイドイメージマップ)
- Server-side Image Map Module(サーバーサイドイメージマップ)
- Object Module(オブジェクト)
- Intrinsic Events Module(組み込みイベント)
- Metainformation Module(メタ情報)
- Scripting Module(スクリプト)
- Style Sheet Module(スタイルシート)
- Style Attribute Module(スタイル属性)
- Link Module(リンク)
- Base Module(ベース)
- Ruby Module(ルビ)
Attribute Collections
共通属性の集合です。このうちEventsは Intrinsic Events Moduleが選択されたとき、またStyleはStyle Attribute Moduleが選択されたときに定義され、それ以外はEmptyとなる。
| 集合名 | 属性 |
|---|---|
| Core | class , id , title |
| I18N | xml:lang |
| Events | onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup |
| Style | style(非推奨) |
| Common | Core + Events + I18N + Style |
Core Modules
XHTML ファミリー必須のコアモジュールです。
Structure Module
| 要素 | 属性 | 最小内容 |
|---|---|---|
| body | Common | (Heading | Block | List)* |
| head | I18N , profile | title |
| html | I18N , version , xmlns | head, body |
| title | I18N | PCDATA |
Text Module
| 要素 | 属性 | 最小内容 |
|---|---|---|
| abbr | Common | (PCDATA | Inline)* |
| acronym | Common | (PCDATA | Inline)* |
| address | Common | (PCDATA | Inline)* |
| blockquote | Common, cite (URI) | (PCDATA | Heading | Block | List)* |
| br | Core | EMPTY |
| cite | Common | (PCDATA | Inline)* |
| code | Common | (PCDATA | Inline)* |
| dfn | Common | (PCDATA | Inline)* |
| div | Common | (PCDATA | Flow)* |
| em | Common | (PCDATA | Inline)* |
| h1 | Common | (PCDATA | Inline)* |
| h2 | Common | (PCDATA | Inline)* |
| h3 | Common | (PCDATA | Inline)* |
| h4 | Common | (PCDATA | Inline)* |
| h5 | Common | (PCDATA | Inline)* |
| h6 | Common | (PCDATA | Inline)* |
| kbd | Common | (PCDATA | Inline)* |
| p | Common | (PCDATA | Inline)* |
| pre | Common, xml:space="preserve" | (PCDATA | Inline)* |
| q | Common, cite (URI) | (PCDATA | Inline)* |
| samp | Common | (PCDATA | Inline)* |
| span | Common | (PCDATA | Inline)* |
| strong | Common | (PCDATA | Inline)* |
| var | Common | (PCDATA | Inline)* |
このモジュールの最小内容モデルはいくつかの内容セットを定義するので、以下に示します。
- Heading
- h1 | h2 | h3 | h4 | h5 | h6
- Block
- address | blockquote | div | p | pre
- Inline
- abbr | acronym | br | cite | code | dfn | em | kbd | q | samp | span | strong | var
- Flow
- Heading | Block | Inline
Hypertext Module
| 要素 | 属性 | 最小内容 |
|---|---|---|
| a | Common, accesskey (Character), charset (Charset), href (URI), hreflang (LanguageCode), rel (LinkTypes), rev (LinkTypes), tabindex (Number), type (ContentType) | (PCDATA | Inline - a)* |
このモジュールを選択するとText ModuleのInlineセットにa要素が追加される。
List Mudule
| 要素 | 属性 | 最小内容 |
|---|---|---|
| dl | Common | (dt | dd)+ |
| dt | Common | (PCDATA | Inline)* |
| dd | Common | (PCDATA | Flow)* |
| ol | Common | li+ |
| ul | Common | li+ |
| li | Common | (PCDATA | Flow)* |
このモジュールは最小内容モデルが"(dl | ol | ul)+"を備えたListセットを定義し、Text ModuleのFlowセットにListセットが追加される。
Text Extension Modules
Presentation Module
| 要素 | 属性 | 最小内容 |
|---|---|---|
| b | Common | (PCDATA | Inline)* |
| big | Common | (PCDATA | Inline)* |
| hr | Common | EMPTY |
| i | Common | (PCDATA | Inline)* |
| small | Common | (PCDATA | Inline)* |
| sub | Common | (PCDATA | Inline)* |
| sup | Common | (PCDATA | Inline)* |
| tt | Common | (PCDATA | Inline)* |
このモジュールを選択すると、hr要素がText ModuleのBlockセットに追加され、その他の要素はText ModuleのInlineセットに追加される。
Edit Module
| 要素 | 属性 | 最小内容 |
|---|---|---|
| del | Common, cite (URI), datetime (Datetime) | (PCDATA | Flow)* |
| ins | Common, cite (URI), datetime (Datetime) | (PCDATA | Flow)* |
このモジュールが使用される場合はdelとins要素がText ModuleのInlineセットに追加される。
Bi-directional Text Module
双方向(テキストを左右どちらから読むか)モジュールです。
| 要素 | 属性 | 最小内容 |
|---|---|---|
| bdo | Core, dir* ("ltr" | "rtl") | (PCDATA | Inline)* |
このモジュールが使用される場合はbdo要素がText ModuleのInlineセットに追加され、dir属性が属性集合I18Nに追加される。
Forms Module
| 要素 | 属性 | 最小内容 |
|---|---|---|
| form | Common, accept (ContentTypes), accept-charset(Charsets), action* (URI), method ("get"* | "post"), enctype (ContentType) | (Heading | List | Block - form | fieldset)+ |
| input | Common, accept (ContentTypes), accesskey (Character), alt (Text), checked ("checked"), disabled ("disabled"), maxlength (Number), name (CDATA), readonly("readonly"), size (Number), src (URI), tabindex (Number), type ("text"* | "password" | "checkbox" | "button" | "radio" | "submit" | "reset" | "file" | "hidden" | "image"), value(CDATA) | EMPTY |
| select | Common, disabled ("disabled"), multiple ("multiple"), name (CDATA), size (Number), tabindex (Number) | (optgroup | option)+ |
| option | Common, disabled ("disabled"), label (Text), selected ("selected"), value (CDATA) | PCDATA |
| textarea | Common, accesskey (Character), cols* (Number), disabled ("disabled"), name (CDATA), readonly ("readonly"),rows* (Number), tabindex (Number) | PCDATA |
| button | Common, accesskey (Character), disabled ("disabled"),name (CDATA), tabindex (Number), type ("button" |"submit"* | "reset"), value (CDATA) | (PCDATA | Heading | List | Block - Form | Inline - Formctrl)* |
| fieldset | Common | (PCDATA | legend | Flow)* |
| label | Common, accesskey (Character), for (IDREF) | (PCDATA | Inline - label)* |
| legend | Common, accesskey (Character) | (PCDATA | Inline)+ |
| optgroup | Common, disabled ("disabled"), label* (Text) | option+ |
このモジュールはふたつの内容セットを定義する。
- Form
- form | fieldset
- Formctrl
- input | select | textarea | label | button
Tables Module
| 要素 | 属性 | 最小内容 |
|---|---|---|
| caption | Common | (PCDATA | Inline)* |
| table | Common, border (Pixels), cellpadding (Length), cellspacing (Length), datapagesize (CDATA), frame ("void" | "above" | below" | "hsides" | "lhs" | "rhs" | "vsides" | "box" | "border"), rules ("none" | "groups" | "rows" |"cols" | "all"), summary (Text), width (Length) | caption?, ( col* | colgroup* ), (( thead?, tfoot?, tbody+ ) | ( tr+ )) |
| td | Common, abbr (Text), align ("left" | "center" | "right" |"justify" | "char"), axis (CDATA), char (Character),charoff (Length), colspan (Number), headers (IDREFS), rowspan (Number), scope ("row", "col", "rowgroup","colgroup"), valign ("top" | "middle" | "bottom" | "baseline") | (PCDATA | Flow)* |
| th | Common, abbr (Text), align ("left" | "center" | "right" |"justify" | "char"), axis (CDATA), char (Character),charoff (Length), colspan (Number), headers (IDREFS), rowspan (Number), scope ("row", "col", "rowgroup","colgroup"), valign ("top" | "middle" | "bottom" | "baseline") | (PCDATA | Flow)* |
| tr | Common, align ("left" | "center" | "right" | "justify", "char"), char (Character), charoff (Length), valign ("top" | "middle" | "bottom" | "baseline") | (td | th)+ |
| col | Common, align ("left" | "center" | "right" | "justify", "char"), char (Character), charoff (Length), span (Number), valign ("top" | "middle" | "bottom" | "baseline"), width (MultiLength) | EMPTY |
| colgroup | Common, align ("left" | "center" | "right" | "justify", "char"), char (Character), charoff (Length), span (Number), valign ("top" | "middle" | "bottom" | "baseline"), width (MultiLength) | col* |
| tbody | Common, align ("left" | "center" | "right" | "justify", "char"), char (Character), charoff (Length), valign ("top" | "middle" | "bottom" | "baseline") | tr+ |
| thead | Common, align ("left" | "center" | "right" | "justify", "char"), char (Character), charoff (Length), valign ("top" | "middle" | "bottom" | "baseline") | tr+ |
| tfoot | Common, align ("left" | "center" | "right" | "justify", "char"), char (Character), charoff (Length), valign ("top" | "middle" | "bottom" | "baseline") | tr+ |
このモジュールが使用される場合はText ModuleのBlockセットにtable要素が追加される。
Image Module
| 要素 | 属性 | 最小内容 |
|---|---|---|
| img | Common, alt* (Text), height (Length), longdesc (URI), src* (URI), width (Length) | EMPTY |
このモジュールが使用される場合はText ModuleのInlineセットにimg要素が追加される。
Client-side Image Map Module
| 要素 | 属性 | 最小内容 |
|---|---|---|
| a& | coords (CDATA), shape ("rect" | "circle" | "poly" | "default") | n/a |
| area | Common, accesskey (Character), alt* (Text), coords (CDATA), href (URI), nohref ("nohref"), shape ("rect"* | "circle" | "poly" | "default"), tabindex (Number) | EMPTY |
| img& | usemap (IDREF) | n/a |
| input& | usemap (IDREF) | n/a |
| map | I18N, Events, class (NMTOKEN), id* (ID), title (CDATA) | ((Heading | Block) | area)+ |
| object& | usemap (IDREF) | Note: Only when the object module is included |
このモジュールが使用される場合はText ModuleのInlineセットにmap要素が追加される。
Server-side Image Map Module
| 要素 | 属性 | 注意事項 |
|---|---|---|
| img& | ismap ("ismap") | |
| input& | ismap ("ismap") | Forms Module か Basic Forms Moduleが選択された場合 |
Object Module
| 要素 | 属性 | 最小内容 |
|---|---|---|
| object | Common, archive (URIs), classid (URI), codebase (URI), codetype (ContentType), data (URI), declare ("declare"), height (Length), name (CDATA), standby (Text), tabindex (Number), type (ContentType), width (Length) | (PCDATA | Flow | param)* |
| param | id (ID), name* (CDATA), type (ContentType), value (CDATA), valuetype ("data"* | "ref" | "object") | EMPTY |
このモジュールが使用される場合はText ModuleのInlineセットにobject要素が追加される。
Intrinsic Events Module
| 要素 | 属性 | 注意事項 |
|---|---|---|
| a& | onblur (Script), onfocus (Script) | |
| area& | onblur (Script), onfocus (Script) | Client-side Image Map Moduleも使用される場合 |
| frameset& | onload (Script), onunload (Script) | Frames Moduleも使用される場合 |
| form& | onreset (Script), onsubmit (Script) | Basic Forms か Forms Moduleが使用される場合 |
| body& | onload (Script), onunload (Script) | |
| label& | onblur (Script), onfocus (Script) | Forms Moduleが使用される場合 |
| input& | onblur (Script), onchange (Script), onfocus (Script), onselect (Script) | Basic Forms か Forms Moduleが使用される場合 |
| select& | onblur (Script), onchange (Script), onfocus (Script) | Basic Forms か Forms Moduleが使用される場合 |
| textarea& | onblur (Script), onchange (Script), onfocus (Script), onselect (Script) | Basic Forms か Forms Moduleが使用される場合 |
| button& | onblur (Script), onfocus (Script) | Forms Moduleが使用される場合 |
Metainformation Module
| 要素 | 属性 | 最小内容 |
|---|---|---|
| meta | I18N, content* (CDATA), http-equiv (NMTOKEN), name (NMTOKEN), scheme (CDATA) | EMPTY |
このモジュールが選択された場合、meta要素はStructure Moduleで定義されているheadの内容モデルに追加される。
Scripting Module
| 要素 | 属性 | 最小内容 |
|---|---|---|
| noscript | Common | (Heading | List | Block)+ |
| script | charset (Charset), defer ("defer"), src (URI), type*(ContentType), xml:space="preserve" | PCDATA |
このモジュールが使用される場合は、script, noscript要素はText ModuleのBlock, Inlineセットに追加される。さらにscript要素はStructure Moduleで定義されているheadの内容モデルに追加される。
Style Sheet Module
| 要素 | 属性 | 最小内容 |
|---|---|---|
| style | I18N, media (MediaDesc), title (Text), type* (ContentType), xml:space="preserve" | PCDATA |
このモジュールが使用される場合は、Structure Moduleで定義されているheadの内容モデルにstyle要素が追加される。
Style Attribute Module
Style属性のモジュールです。属性集合のStyleがアクティブになりますが、XHTML 1.1では非推奨となっています。
Link Module
| 要素 | 属性 | 最小内容 |
|---|---|---|
| link | Common, charset (Charset), href (URI), hreflang (LanguageCode), media (MediaDesc), rel (LinkTypes), rev (LinkTypes), type (ContentType) | EMPTY |
このモジュールが使用される場合は、Structure Moduleで定義されているheadの内容モデルにlink要素が追加される。
Base Module
| 要素 | 属性 | 最小内容 |
|---|---|---|
| base | href* (URI) | EMPTY |
このモジュールが使用される場合は、Structure Moduleで定義されているheadの内容モデルにbase要素が追加される。
Ruby Module
Ruby Annotationで定義されている、テキストにルビを振る際のモジュールです。
| 要素 | 属性 | 最小内容 |
|---|---|---|
| ruby | Common | (rb, (rt | (rp, rt, rp))) |
| rbc | Common | rb+ |
| rtc | Common | rt+ |
| rb | Common | (PCDATA | Inline - ruby)* |
| rt | Common, rbspan (CDATA) | (PCDATA | Inline - ruby)* |
| rp | Common | PCDATA* |
現在はInternet Explorerしか対応していない(はず)ですが、これはW3Cがまだ勧告とする前に独自実装されたため、その全てをサポートしているわけではありません。
日本語では振り仮名を付ける際によく使用されると思います。「漢字」にルビを振るとして説明すると、今までは「漢字（かんじ）」としていました。この「漢字（かんじ）」のうち「漢字」の部分をルビベーステキスト(ruby base text)、「かんじ」の部分をルビテキスト(ruby text)、（）をルビ括弧 (ruby parenthesis)と覚えてしまえば、使用するのは簡単です。
では、実際にマークアップするとしましょう。
ルビを使用したい文字列をruby要素で囲みます。
<ruby>漢字（かんじ）</ruby>
続けてルビベースの部分をrb要素で囲み、ルビテキストをrt要素で囲みます。
<ruby>
<rb>漢字</rb>
（<rt>かんじ</rt>）
</ruby>
全てのWWWブラウザがこの要素を解釈できればいいのですが、現状ではそうではないので対応していないWWWブラウザの為にルビ括弧を残しておきたいので（）をrp要素で囲みます。
<ruby>
<rb>漢字</rb>
<rp>（</rp>
<rt>かんじ</rt>
<rp>）</rp>
</ruby>
これでInternet Explorer5以上では
と表示され、サポートしていない場合は今まで通り「漢字（かんじ）」と表示されます。
最後に
XHTML 1.1を使用する場合、問題となるのが古いブラウザへの対応です。リンクのアンカー名をid属性で指定すると一部のブラウザでは機能しません。また、XML宣言が表示されてしまうものもあるようです。
XML宣言が表示される程度ならまだいいのですが、リンクが機能しないとユーザーはページの先頭から辿っていかなくてはならず不便です。わたしも以前に全てのページをXHTML 1.1へ書き直したのですが、この問題のために一部の文書をXHTML 1.0へ変更して、a要素のname属性での名前付けにしました。
時々ブラウザを指定しているサイトがありますが、特定のものを強要するのはどうかと思いますし、様々な理由で最新のものを使えない(もしくは意図的に使用しない)こともあるでしょう。新しい技術を使用するのは難しいものですね。