構造とプレゼンテーションの分離とは
HTML/XHTMLは文書の構造をマーク付けによって明示しますが、その構造をどのように表現するかは規定しません。文書制作者が、文書の構造に特定のスタイルを与えたい場合は、CSSなどのスタイルシート言語を使用することが推奨されています[HTML4.01]。このように、構造とプレゼンテーションを切り離して扱うことを、構造とプレゼンテーションの分離と呼びます。
構造とプレゼンテーションを適切に区別するためには、まず見出しやパラグラフといった文書の構造を、しっかりと明示することが大切です。なんでもかんでもdiv要素やspan要素としてマーク付けしたり、特定の視覚表現を意味するclass名やidを付けているようでは、構造とプレゼンテーションを分離できているとは言えません。
構造とプレゼンテーションを分離する利点
相互運用性、アクセシビリティの向上
Webを利用する環境は様々です。たとえば、プレゼンテーションを重視しないテキストブラウザや、携帯端末などの表現能力に制限のある環境、音声出力や点字出力といった非視覚環境、などが考えられます。そうした多様な環境のすべてに、特定の表現方法で対応するのは不可能です。かといって、表現能力の低い環境や非視覚環境を切り捨ててしまうと、Webは特定の環境以外では極端に利用しにくいものになります[HTML4.01]。
構造とプレゼンテーションを切り離して扱う第一の利点は、一つの文書で多様な環境に対応できることです。「文字を大きく」という指示は、文字サイズを変更できる環境でしか意味がありません。しかし、「ここは見出しです」という明示があれば、ユーザエージェントはそれぞれの環境に適した形で見出しを表現することができます。このような構造の明示は、検索エンジンにとっても有益です[住, 2002-2007]。
文書制作者は、スタイルシートを使用して文書のスタイルを指定することができます。その際、文書制作者は、あらゆる出力メディアに向けてスタイルシートを用意する必要はありません。ユーザエージェントは、自身に適合しないスタイルシートを無視し、明示された構造に従って文書を出力することができるからです。また、文書制作者は、出力メディア別に複数のスタイルシートを用意して、異なる環境のそれぞれに最適なスタイルを指定することも可能です。
作業効率、メンテナンス性の向上
構造とプレゼンテーションを切り離して扱う第二の利点は、構造とプレゼンテーションの一貫した結びつきを効率よく維持できることです。たとえば、文書内の大見出しすべてに「文字サイズは二倍」といったスタイル指定を個別に記述するよりも、外部のスタイルシートに「大見出しの文字サイズは二倍」といったスタイル規則を一回だけ記述するほうが、遥かに簡単です。これは、あとから全体のスタイルを調整・変更する際にも言えます。
構造とプレゼンテーションを分離することによって、全体のスタイルを調整・変更する際の労力は最小限になり、しかも、いったんスタイルシートが完成してしまえば、以降は文書を作成する際にスタイルを指定する必要が一切なくなります。
ファイルサイズの削減
構造とプレゼンテーションを分離する第三の利点は、ファイルサイズを大幅に削減できることです。これによって、ウェブページへのアクセスはより高速になり、特に低速回線の利用者には大きな恩恵となります。また、大規模なウェブサイトであれば、サーバの負担を大幅に軽減することにも繋がります[Veen, 2003]。
機械処理に対する適合性が向上
構造とプレゼンテーションを分離する第四の利点は、文書の機械処理が容易になることです。機械には、文字サイズの変更がなにを意味するのか判断できません。しかし、「見出し」や「強調」といった構造の明示があれば意味は明確です。
これによるわかりやすい恩恵はSEO（検索エンジン最適化）です。検索エンジンは見出しや強調語句を重要なものと判断してくれますし、HTML文書からスタイル指定のための記述を排除することで、文書に含まれるキーワードの割合も増加します[住, 2002-2007]。結果として、ウェブページが適切なキーワードで検索結果の上位に表示される可能性が高くなります。
また、適切なclass名やidを付けておけば、あとからテキスト置換ツールなどを使用して文書の構造や内容を変更することも容易になります。
構造とプレゼンテーションの関係
私たちが見出しやパラグラフ、強調といった文書の構造を認識するには、それらがなんらかの形で表現されている必要があります。言い換えるなら、スタイルが変化する場合はそこになんらかの意味がある、と私たちは判断するわけです。したがって、ユーザが文書の構造を適切に把握するためには、以下の点が重要になります。
- 同一の構造を持つ要素は、一貫して同一のスタイルを持っている。
- スタイルの異なる要素は、異なる構造に属する。
スタイルが意味もなく変わったらユーザの誤解を招きますから、これは当然のことです。たとえば、途中まで中見出しのスタイルだったものが、いきなり小見出しのスタイルになったら、混乱は必至でしょう。
同一の要素型なのにスタイルが異なるような場合――たとえば、同じレベルの見出しの一部が他とは異なるスタイルを持つことはありえます。その場合、他とは異なるスタイルを持つその見出しは、同じレベルの他の見出しとは異なる役割（class, id）を持っていると考えるのが自然でしょう。
このように、構造は常にプレゼンテーションに先立ちます。文書の構造は、それを示すスタイルがどのようなものであるかに関係なく常に存在しますが、文書のプレゼンテーションは構造から独立して存在することはありません。