XHTMLを構造化する

　XHTMLはXMLの一種なので（と、突然の話では難しいか。まあ、XMLは余り気にしないでいい。）文書の論理的な構造とデザインが分離されている、ことになっている。

　が、しかし、もともとのHTMLが、その辺りまぜこぜで、というよりは、デザイン用のタグの方が大部分なので、それをXMLの規格に適合するようにお化粧したとしても（XHTMLのXの部分が、そのお化粧の程度を物語っている。）、やはり、文章の構造的な意味を表すようなタグが新たに導入されたわけではないので、それほど代わり映えはしない。

　一応、デザインはCSSに分離して記述することになっているが、実はこのCSSを利用する方法が、期せずして、構造を表すタグを作る手段になるのである。もちろん、XHTMLではタグを新設することはできないので、擬似的なタグということになるが。

　どうするのかというと、class属性を、擬似的な構造用タグに使うのである。XHTML (HTMLでも可) のタグにはclassという属性を使えるが、その属性値の定義はCSSの中ですることになっている。そのclass属性に構造的な意味を持つ値を作っていけばいい。

　たとえば、一つの文書ならば、タイトルや作成者名、作成日などを記述する必要がある。これらは「タイトル」や「作成者」や「作成日」などという、文書に必要な構造的意味をもっている。しかし、(X)HTMLでは、これらの構造的意味を示すタグは存在しない。そこで、

<h1 class="title">XHTMLを構造化する</h1>

<h1 class="author">福田洋一</h1>

<h1 class="publish_date">2005/3/20</h1>

というように記述する。デザインについては、ここでは何も決めない、あるいは決める必要がないのは、XMLと同じことである。デザインは別にCSSの中で、

h1.title { font-size: 16px; text-align: center; }

などというように指定する。ここで、同じh1タグが、class属性の値によって、三つの異なった構造的意味を表すものとして区別されていることに注意。CSSを指定しなければ、このclass属性は無視され、何事もなかったように、普通のh1として扱われる。

　このようにして、class属性を使って、文書全体の構造を設計し、それとCSSを組み合わせることで、構造的な意味ごとにデザインを指定し分けることができるようになるのである。