Yahoo! Search Blog: Introducing Robots-Nocontent for Page Sections という記事を読んで考えたこと。この記事の結論は、Yahoo のクローラーが class="robots-nocontent" 属性のつけられた部分を重要視しないようになるよ、ということを言っています。一例を挙げると、

<div class="robots-nocontent">
  この部分はサイトのナビゲーションメニューで
  すべてのページに共通の部分だから、
  記事とは無関係な単語やキーワードも含まれているよ。
</div>

というような感じで使うことが想定されています。rel="nofollow" の考え方に近いです。このように特定のクラス名などを付与して、ウェブ全体で共通の意味づけをもたせようという考え方は Microformats といわれています。Technorati はこの Microformats を推進しています。今回の Yahoo の発表は、Yahoo が Microformats に対応していくという表明と考えられます。

現代 HTML の問題点

しかし、この発表には賛否両論が渦巻いています。そもそも検査エンジンのロボット（クローラー）のために、文章構造に本来必要のない class を追加することが HTML の本質に反している、という主張があります。

私はこの意見には賛成ですが、現代の HTML 文章が、本来想定されていた HTML と異なる使われ方をしているところにそもそもの問題があると思います。今日の HTML が文書内容だけでなくユーザインターフェース（UI）や広告、サイドバーガジェットなどを含んでしまっているということです。

10年前の HTML は、文書構造とデザインが一体化しており、誰もが table,td 要素を使ったレイアウトや font 要素を使った見出し・強調の表現に疑問を持っていませんでした。それが啓蒙活動の成果により、HTML と CSS によるデザインの分離という考え方が浸透し、確立されてきました。

しかし、UI の分離という点ではいまだに成し遂げられていません。そればかりか AJAX の登場で、HTML に UI が組み込まれる状況は加速しています。理想的には UI 部分を HTML から分離し、Mozilla の製品で使われている XUL など、他の言語で置き換えるという方向性が取られるべきだと思います。そもそも HTML が XHTML に進化したのも、名前空間を使って XML 文書に XML 文書を埋め込めるという XML ならではのメリットがあったからです。

セマンティックウェブの考えは普及したが、なぜ XML が使われないのか

セマンティックウェブの考え自体は広く普及していますが、XHTML を XML 文書として積極的に利用しようという考え方はあまり普及していません。これにはいくつかの理由があると考えられます。

一つにはすべての UA（すなわちウェブブラウザやクローラー）が、XML を解釈できないことがあります。また、多くのウェブデザイナーにとっては HTML はまだしも XML となると難易度が高い（と感じる）ことではないかと思います。技術者の中でも XML は苦手という人はいます。

例外的なのは RSS（のフォーマットである RDF）に Dublin Core を埋め込んでいる例でしょう。ブログに RSS を埋め込んでいる例もありますが、ほとんどの場合 HTML のコメント扱いされており、本来あるべき姿ではないと感じています。

XML の考え方は非常に有用なのですが、とっつきにくいというのが普及を妨げている要因だと思います。そこで、XML を使わずに HTML の範疇でセマンティックウェブに近づける試みが Microformats なのです。これなら HTML を理解したデザイナーも class 属性に決められた値を追加するだけですから簡単に取り組めます。

Microformats はその導入のしやすさから、注目を集めています。しかし、大局的にはセマンティックウェブへの取り組みを遅らせてしまうという可能性もあると私は考えており、導入には躊躇しています。

本来ならばウェブの文書を作成するツールが XML に対応し、またブラウザが XML に対応していけば Microformats のほとんどは不要になるはずです。それとも私はまだ理解していないだけで、Microformats は XML と共存して、もしくは相互補完してセマンティックウェブの普及に役立つのでしょうか。しかし Microformats は HTML のタグを拡張してきた苦い過去を彷彿とさせます。

本来 Yahoo が取るべき対応

なぜ Yahoo はウェブサイトの作成者に労を強いるのでしょうか。Google は以前からウェブ文書のなかからコンテンツの重要部分とそうでない部分の切り分けに成功しているように見えます。Google は力業で解決していますが、Yahoo にはそれが難しいのか、よりスマートな解決策をもとめているのか、あくまで補助的に参考にするだけなのか疑問です。

たとえば今回の Yahoo の取り組みも、スパマーに逆手に取られたらどうなるのか考えてみると、Google のように自動的に判別する技術はどのみち必要になってくると思います。

IE については、謎小屋で、XSLT を使う方法が紹介されているほか、クライアント側でレジストリを書き換えて対応することもできます。しかし、Googlebot について、こちらではどうすることも出来ません。そんなわけで、ヘタレな私は、未対応な UA に対しては mod_rewrite で text/html を出力するなどという小手先の対応をしているわけです。

しかし、もじら組の中野さんは、ウェブログを application/xhtml+xml のみで運営しています。なかなか強気で真似できないなあと思いました。中野さんはapplication/xhtml+xmlで運営しているサイトなんて、 ここぐらいなものかもしれません。と書いています。

ところが海外でも似たようなことを実践しているサイトがあるようです。Going My Way: Googleには読めないページで知ったのですが、Harry Love というサイトです。というものの、このサイトは XHTML ではなく XML + XSLT なので事情は少し違います。

上記サイトが共通しているのは、私と違って Google にインデックスされないことを恐れていないことでしょう。素晴らしいです。私は W3C 信者に近いのですが、現実派でもあります。「検索されてなんぼ」と思っていますので、Googlebot が対応するまではレスポンスヘッダを application/xhtml+xml にすることはできないでしょう。もし Google と YST が対応したら IE のことは無視して切り替えるつもりですけれど。

正体が ins と del であるところの %Edit.class; は含まれてなかったのねーん。 pre は「整形済みテキスト」だから、いったん整形したらもうあとから挿入削除しちゃダメとか？うぬぅ。XHTML1.0 Strict までは OK だったからてっきり。

なぜ content が application/xhtml+xml ではなく text/html なのかというと、HTTP レスポンスヘッダで application/xhtml+xml を指定した場合、Mozilla は対応していますが、Windows IE 5〜6 や Mac IE 5 では表示されないという問題があるからです。text/xml としても IE では DTD の読み込みエラーが出てしまうので、現実的には text/html を指定するしかありません。HTTP レスポンスヘッダと meta 要素の指定が食い違っているのもまずいだろうということで、今まで meta 要素にも text/html を指定してきました。

しかし、XHTML に限らず、本来 MIME タイプは HTTP レスポンスヘッダで指定されるべきなので meta 要素で指定する必要はないのです。（そもそも HTTP サーバが解釈するためにあるのですが、多くのサーバではそのような実装はされていません。）が、meta 要素の指定しか理解しない旧式のソフトもあるため meta 要素も記述するということが慣例となっています。私もそのような感覚で XHTML1.1 文書に meta 要素を記述していました。しかし「Re: XHTML1.1のMIMEタイプ(2)」を読んで、記述すべきでないという意見を知り、考えた結果削除することにしました。

ローカルに保存した HTML ファイルを利用する際は、レスポンスヘッダは無いため、ブラウザが meta 要素を考慮してくれるのは有り難いのですが、XHTML では XML 宣言で文字コードを指定しているので、この点では問題ないでしょう。

それにしても、Another HTML-lint で、XHTML1.1 文書の HTTP レスポンスヘッダ指定が text/html だと警告が出るようになってしまいました。これは、W3C の文書 “XHTML Media Types”（和訳）に基づいていると思いますが、application/xhtml+xml を指定できない現状ではどうしたものでしょうか。Apache の設定でブラウザを判別して、レスポンスヘッダを変えられればよいのですが。

今日は私の使っているオススメ HTML 本を紹介します。ZSPC の大藤幹さんが書かれた『詳解 HTML&XHTML&CSS辞典』です。W3C の仕様に沿った正しい HTML, CSS のリファレンスになっています。
フルカラーでコーディング例も多く、要素間の依存関係も一目で分かって便利です。

これから HTML をはじめる人だけでなく、正しい HTML を知らない方、HTML は分かるけどスタイルシートは分からないという人にお勧めです。もちろんベテランの方にも使い勝手はよいと思います。私はこの本を手元に置いて HTML, CSS のコーディングをしています。

HTML のタグリファレンス本はたくさんありますが、どれも同じではありません。世の中には、いまだに FONT タグの利用を推奨しているようないい加減な本が溢れています。 ぜひ正しい HTML の本を利用してください。私はこの一冊をお薦めします。

HTML で画像を挿入にするには、img 要素を利用します。

img 要素には、何らかの事情で画像が表示できない状況を想定して、代替テキストを指定する必要があります。画像が表示できない状況とは、

• Lynx などのテキストブラウザで閲覧している場合
• 画像を自動的に読み込まない設定にしている場合
• 画像の形式に対応していない環境で閲覧している場合
• 文字を音声で読み上げる環境（音声ブラウザ）を利用している場合
• 画像の内容を解釈しない検索ロボットなどのアクセス

などがあります。

img 要素において、代替テキストは alt 属性で指定します。たとえば、このサイトのバナーは次のような指定になります。

  <img alt="津田ふみかの日記" src="/images/nikki.png" width="88" height="31" />

実際には、次のように表示されます。

alt 属性には、画像が表示されない場合の代わりとなるテキストを指定するので、この場合は「津田ふみかの日記」だけで良いのです。「津田ふみかの日記のバナー画像」などと書いたり「nikki.png」などとファイル名を書くのは不適切です。一部の HTML 生成ツールは、自動的に alt 属性にファイル名を入れてしまいますが、適切な文字列に直してください。

また、単なる飾りのための画像で、代替テキストを指定する必要のないものは、無理に記述する必要はありません。その場合でも、alt 属性を書かないのではなく、alt="" のように記述します。

なお、Internet Explorer (IE) では、画像の上にマウスポインタを置くと、alt に設定した文字列がツールチップとして表示されます。しかし、これは IE の挙動であって、他のブラウザも同じ挙動をするとは限りません。実際に Mozilla や Netscape ではツールチップは表示されません。

画像の説明は、title 属性で指定します。title 属性の内容をツールチップとして表示するブラウザは Mozilla 系をはじめとして数多くあります。IE でも、title 属性が指定されている場合は、alt 属性に優先してツールチップ表示されます。

  <img alt="津田ふみかの日記" title="津田ふみかの日記のバナー画像。ご自由にご利用下さい。"
      src="/images/nikki.png" width="88" height="31" />

次の画像で試してみてください。

object 要素と代替要素

img 要素の代替テキストでは、複雑な代替手段を提供できません。例えば、次のような凝った表を表わした画像は、代替テキストを用意することは、alt 属性では難しいです。

この表を HTML で表わすと、

  <table summary="値段一覧表">
    <thead>
      <tr>
        <th>商品名</th>
        <th>価格<span class="notice">(単位:円)</span></th>
        <th>在庫状況</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>豆腐</td>
        <td class="price"><em>price down!</em>68</td>
        <td class="mark">×</td>
      </tr>
      <tr>
        <td>油揚げ</td>
        <td class="price">128</td>
        <td class="mark">◎</td>
      </tr>
      <tr>
        <td>はんぺん</td>
        <td class="price">148</td>
        <td class="mark">△</td>
      </tr>
    </tbody>
  </table>

のようになりますが、当然、このまま alt 属性の値として書くわけにはいきません。

このような場合、object 要素を利用することができます。object 要素は様々なオブジェクトを文書中に埋め込むための汎用的な要素です。

オブジェクトとは、画像・映像・音声・Javaアプレット・Flash・ActiveXコントロール・他の HTML 文書など様々です。これまでの、applet, embed, bgsound, iframe などの要素を置き換えるほか、img 要素の代わりとしても利用できます。実は、img 要素も XHTML2.0 では object 要素で置き換えられる予定です。

object 要素は、次のように記述します。

  <object data="/images/20030726_imgalt-sample.jpg" type="image/jpeg" width="500" height="184">
    <!-- ここに代替要素を記述 -->a
  </object>

代替要素は、<object>～</object> 間に記述します。単なる代替テキストでも構いませんし、画像や表でも構いません。他の object 要素を入れ子にして利用することもできます。例えば、Flash を利用した動きのあるメニューの代替手段として、静的なイメージマップをし、さらにテキストリンクを代替手段として用意しておくといった三重構造にすることもできます。

今回の場合は、普通はあまりこんなことはしませんが、画像で作成した表を object 要素で指定しておき、中に代替要素として HTML による表組みを指定しておきます。

  <object data="/images/20030726_imgalt-sample.jpg" type="image/jpeg" width="500" height="184">
    <table summary="値段一覧表">
      <thead>
        <tr>
          <th abbr="商品">商品名</th>
          <th abbr="価格">価格<span class="notice">(単位:円)</span></th>
          <th abbr="在庫">在庫状況</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>豆腐</td>
          <td class="price"><em>price down!</em>68</td>
          <td class="mark">×</td>
        </tr>
        <tr>
          <td>油揚げ</td>
          <td class="price">128</td>
          <td class="mark">◎</td>
        </tr>
        <tr>
          <td>はんぺん</td>
          <td class="price">148</td>
          <td class="mark">△</td>
        </tr>
      </tbody>
    </table>
  </object>

こうすることで、object 要素に対応したブラウザでは、見栄えの良い表が表示されますし、object 要素に対応していなかったり、画像が表示できない環境では、通常の表を見ることができます。音声ブラウザや検索ロボットにも対応できます。

以前は「acronym は頭文字。それ以外の略語全般は abbr」というような記述が多く、私もそのように覚えていました。それでも、「NATO のように一語として発音するものは acronym だが、WWW のように一文字ずつ発音するのは abbr」という説明もあり、いま一つはっきりしない状態でした。

しかし、最近調べたところ、実は acronym は不要であるという方向に向かっています。そもそも、acronym が導入された経緯というのが、「IE4 が acronym のみに対応し、abbr に対応していないから」だったそうです。XHTML2.0 では acronym は削除が検討されています。略語は abbr を使いなさいということでしょう。

しかし、Windows 版 IE6 でも acronym には対応しているものの、abbr には対応していません。内部的に同じ処理をすればよいだけなので、これは MS の怠慢と言わざるを得ないでしょう。（対応していないのではなくバグだという説もあります。）

結論としては abbr を使いましょう、ということなのですが、圧倒的なシェアを誇る IE が非対応というわけです。現状では acronym も使い、XHTML2.0 の仕様が具体化したら、abbr に統一するというのが良いのではないでしょうか。また、Windows 版 IE の場合にのみ、JavaScript で abbr 要素を acronym 要素に置換するという技も良いかもしれません。

参考

• abbr要素とacronym要素について(Chaichan-World !)
• 省略語句の説明(The Web KANZAKI)