title 属性と alt 属性

title 属性

HTML の要素や属性の中にはうまく使用することによって閲覧を助けるものも多く、この title 属性もその一つなんですが、あるいは存在自体意外と知られていないかもしれません。以下に使用例を挙げていますが他にも多くの要素で使用可能です。

なお、title は title でも <title>ページタイトル</title> のことではありません。こちらは title 要素になります。

title 属性( HTML 4.01 仕様書日本語訳)

仕様書によると、「この属性は、当該要素に関する助言的情報を提供する」ことになっています。また、ほとんどの要素に使えるのではないかと思うくらい多くの要素で使用可能で、 IE の 4.0 以降 や Netscape6 / Mozilla (Netscape 4.x は非対応)などではその属性値をポップアップで表示します。あるいはそれらとは違った形で対応する UA も存在するかもしれません。

UA によっては表示されないこともありますので、必須の情報ではなく必ずしも表示されなくても困らない、もしくは文中に記述する必要まではないけれども簡単な説明はつけておきたい、といった場合に使用するのが実用的かと思われます。長い文章の要約であるとか、リンク先の補足説明などですね。

例えば以下のように記述したとします。

<p><a href="http://memoff.dricas.ne.jp/memoff/" title="Memories Off Official Homepage">「 Memories Off 2nd 」</a></p>

すると「 Memories Off 2nd 」といった具合にリンクがはられるわけですが、対応しているブラウザなら「 Memories Off Official Homepage 」の部分も表示してくれるので、そのリンク先が個人サイトやゲーム情報サイトではなく、公式サイトであるとわかるわけです。

また、ゲームでも映画でも何でもかまいませんが、ある作品について語るために関連情報を扱っているサイトやページにリンクをはる場合、似たような名称が多くなることも考えられますが、そういった際に title 属性で各ページの簡単な説明や URL などを付け加えておけば区別もしやすくなります。

もう少し詳しい例を挙げると、以下のような使い方も考えられると思います。まあこれは少しやりすぎかもしれませんが。

<h1>題名</h1>

<div title="第一章の概要">
  <h2>第一章</h2>
  <p title="本文1の要約">本文1</p>
  <p title="本文2の要約">本文2</p>
</div>

<div title="第二章の概要">
  <h2>第二章</h2>
  <p title="本文3の要約">本文3</p>
  <p title="本文4の要約">本文4</p>
</div>

あるいはこんな感じとか。

<p> What's New </p>
<ul title="○月×日〜△月□日の更新履歴">
  <li>更新履歴1</li>
  <li>更新履歴2</li>
  <li>更新履歴3</li>
</ul>

あくまでも「助言的情報」ですし、対応していない UA もありますので、なんでもかんでも付ければいいというものではありませんが、使い方によってはそれなりに閲覧者の手助けになるのではと。

alt 属性

alt 属性( HTML 4.01 仕様書日本語訳)

そしてこちらは alt 属性のお話。 Netscape 6 以降などの Mozilla 系ブラウザでページを閲覧した際に、他のブラウザではポップアップで表示される alt 属性の属性値、 <img src="画像の URL" alt="画像の説明"> の「画像の説明」部分が表示されなくて、不思議に思われた方も多いかと思います。

ですが、これはバグではなく( Netscape / Mozilla の)仕様なんだそうです。で、 HTML 4.01 では alt 属性についてどのように規定されているかと確認してみますと、「この属性は、画像、フォーム、アプレットを表示できないユーザエージェントのために、代替テキストを指定する」となっています。

代替テキストというところがミソで、おそらくは画像を表示している時に「代替」テキストも同時に表示するのはおかしい、という解釈かと思われます。実際 Netscape 6 以降でも、「画像を表示しない」設定にしていると、その画像のかわりに alt 属性の属性値が表示されるようになります。

それではNetscape 6 では今までのようなポップアップ表示ができないかというとそのようなことはなく、前述の title 属性を指定していればその属性値が( IE や 旧 Netscape などの alt 属性のように)表示されます。

要は img 要素の alt 属性には画像が表示されない時のためのテキストを、そして画像そのものの説明文には title 属性を使うべきという理屈なんでしょう。ただこのあたりの解釈についてはまた変わる可能性もあるかもしれません。

それはともかく画像の説明文で、「初めて(ソフト名)を使って描きました」とか、「ちょっと失敗してしまいました」なんてツッコミ的文章は、(画像が表示されていないと意味が通じないので)本来なら alt 属性ではなく title 属性に記述するのが妥当なのかもしれません。で、alt 属性のほうには何の画像であるかの説明(例えばキャラクターの名前)を入れると。

ちなみに HTML 4.01 では、 img 要素の alt 属性それ自体は必須です。しかし、だからといってなんでもかんでも説明を入れればいいのではなく、単なる飾りなど装飾以上の意味の持たない画像の場合は、 alt="" のような指定も認められます。これはつまり、代替文字列が存在しない(あるいは必要ない)ことを明示的に示している点に意義があるわけです。