はじめに
本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。
連載第3回目となる今回のテーマは、「目的にあった要素選び」です。コーディングの際、「構文的に正しいかどうか」はツールを使ってチェックすることができますが、「目的に合っているかどうか」については人間が判断する他ありません。どの要素でマークアップするか、判断に迷う部分について掘り下げて考えてみましょう。
対象読者
- XHTMLとCSSの基本を理解している方。
- Web標準サイトの実践的な作り方に興味のある方。
必要な環境
（X）HTMLやCSSを記述するエディタと、それを確認するブラウザがあれば、特別な環境は必要ありません。
構文の妥当性と目的の妥当性
マークアップの妥当性は、構文の妥当性と目的の妥当性の2つの側面から考えることができます。
構文の妥当性
「構文の妥当性」とは、そのマークアップが「構文的に正しいかどうか」ということを指します。例えば、その文書型で非推奨の要素や属性を使用していないか、要素が正しくネストされているか、開始タグと終了タグが対になっているかどうか、などが焦点となります。
Web標準に準拠したWebサイト制作を目指すなら、相互運用性や互換性を確保するためにも、少なくとも「構文的に正しい」という条件はクリアしておきたいところです。例えば、支援技術を含むユーザーエージェントは、正しい構文であってこそ本来の機能を発揮することができます。Webブラウザは、構文を解析したうえでユーザーに知覚できる形でコンテンツを掲示しますし、検索エンジンのクローラも、構文を解析したうえでデータベースにインデックスを追加します。構文にミスがあった場合、音声ブラウザであれば、正しく読み上げることが難しくなりますし、視覚ブラウザであれば、正しくレンダリングするのが難しくなるでしょう。同様の理由から、SEO的にも期待する効果は得られにくくなるはずです。
さて、この「構文の妥当性」については、ユーザーエージェントの解析メカニズム同様、プログラムで解析して評価することができます。例えば、属性値を囲む引用符を1つ付け忘れるようなささいなミスでも構文エラーとなってしまうわけですが、このような人間が気づきにくい箇所であっても、W3C Markup Validation ServiceやAnother HTML-lintなどの解析ツールを利用することで、確実に、そして簡単に発見することができます。
ツールを利用して「構文の妥当性」をチェックし、構文エラーを修正すれば、少なくともユーザーエージェントには正しく機能してもらうことができるようになるはずです。けれども、ブラウザのようなユーザーエージェントを利用してWebページを視聴しているユーザーに対して、情報が正しく伝わっているかどうかは、また別の話しです。これには「目的の妥当性」が関連してきます。
目的の妥当性
「目的の妥当性」では、「要素、属性、属性値の使いどころが、仕様書で示されている本来の目的に合っているかどうか」が焦点となります。ここではtitle要素を例に挙げてみましょう。
title要素は、「開始タグと終了タグが必須」で、「head要素内に必ず1つのみ」なければなりません。また、コメントも含め、他のマークアップが現れてはなりません。以上が構文的なルールとなりますが、さらにtitle要素は、「その文書の内容を識別する」ために用いる必要があります。これが「目的の妥当性」で扱われる部分です。
head要素内にtitle要素がなかったり、2度登場したり、title要素内に他のマークアップがあったりすることは認められませんが、この「構文の妥当性」については、前項で紹介したように、ツールを利用してチェックすることができます。
しかし、<title>と</title>の間に記述された内容が、「その文書の内容を識別するものとして適切であるかどうか」という「目的の妥当性」については、人間の判断に頼るしかありません。
次のサンプルコードでは、「説明」というタイトルが付けられています。ここでのユーザーエージェントの役割は、「title要素の内容をユーザーが得られるようにする」ことです。例えば、ページヘッダやウィンドウタイトルとして掲示したり、読み上げたりするわけですが、「構文の妥当性」さえクリアされていれば、この仕事は果たされます。このサンプルの場合、構文的には正しいので、「説明」というタイトルがユーザーに掲示されることになりますが、これだけでは何の説明なのかユーザーが判断することができません。つまり、目的の妥当性については、「妥当ではない」ということになります。
<head> <title>説明</title> </head>
ユーザーエージェントの動作を確実にしたうえで、ユーザーに対しても情報が正しく伝わるようにするためには、構文と目的の両方を妥当なものにする必要があります。
次のサンプルは、その文書の内容を識別できるよう、タイトルをより具体的にしたものです。ユーザーは文脈抜きで文書を参照することがあるため、文脈を踏まえたタイトルを付けなければなりません。つまり、「説明」のような文脈不明なタイトルではなく「目的の妥当性についての説明」のような、より具体的なタイトルを提供すれば良いわけです。
<head> <title>目的の妥当性についての説明</title> </head>
さて、title要素の場合「文書の内容を識別するために利用する」というように、その使用目的が明らかですし、「1つの文書に1度のみの出現」に限られていますから、マークアップ時の判断に迷うことはまずないでしょう。しかし、（X）HTMLに用意されている要素や属性は決して豊富とは言えませんから、状況によってはマークアップ時に「ここはどの要素を使うべき？」と、判断に迷う部分も出てきます。以降、「目的の妥当性」において、迷いの生じやすい状況を取り上げて解説していきます。
