DATE : 2006/04/04 (Tue)
画面やリンクなどにコメントを付ける方法をメモしておきます。
「コメントを付ける」とはどういうことかと言いますと、……とりあえず、「ここにマウスポインタを合わせてみてください（視覚系ブラウザの方のみ）」
Internet Explorer や Mozilla を使用している方は、ツールチップが見えたと思います。
上の例のソースを以下に示します。
<span title="( ´∀｀)" style="color:blue">（中略）</span>
ソース中にある title 属性が、ツールチップを見せていた正体です。
title 属性は、HTML 4.01 仕様書に次のように書かれています。
この属性は、当該要素に関する助言的情報を提供する。
（「7.4.3 title 属性」より）
ちなみに title 属性は、以下の要素以外で自由に使えます。
- base
- basefont
- head
- html
- meta
- param
- title
ところで、画像上でツールチップを表示するために alt 属性を使用する例があります。しかし、仕様書には以下のように書かれています。
この属性は、画像、フォーム、アプレットを表示できないユーザエージェントのために、代替テキストを指定する。（以下略）
（「13.8 代替テキストの指定方法」より）
「画像（中略）を表示できないユーザエージェント」のための「代替テキスト」なので、ツールチップで表示される保証はありません。実際、 Mozilla 系のブラウザでは、画像が表示できる場合は代替テキストを表示しません。
そのため、コメントを付けたいのであれば、 alt 属性ではなく title 属性を使うべきです。そしてalt 属性には、代替テキストのみを書きます。
なお、 title 属性の中身はあくまでも「助言的情報」に過ぎません。そのため、テキストブラウザなどの表現能力に制限のあるブラウザでは、 title 属性が全く反映されないこともあります。
そのため、重要な情報は title 属性ではなく、地の文に書くようにした方がよさそうです。
ちなみに img 要素については、画像について解説するページを指定する longdesc 属性があります。
HTML 関連のテクニックを収集する中で、これはと感じたものを取り上げています。