使い分けよう!alt属性とtitle属性の違い|HTMLタグ

似たような意味合いのタグですが、実は用途が大きく違ったりします。今回はimg要素a要素の違いについて調べていきたいと思います。

alt属性とtitle属性

<!--alt属性-->
<img alt="サンプル画像" src="sample.jpg" /></h4>
<!--title属性-->
<a title="HTMLタグまとめ" href="http://webpad.felicyle.com/">オレのWEBPAD</a>

alt属性はimg要素だけのもの

alt属性img要素にしか入れられません。これは画像が表示されなかった場合に代わりに表示される代替テキストと呼ばれるものです。

IEの場合、この属性に指定されたテキストがマウスオーバーで噴出しとして表示されます。他のブラウザは表示されません。

alt属性

alt属性に指定されたテキストは画像がリンク切れの場合など何らかの原因で表示されない場合にテキストとして出力されます。
また、音声ブラウザの場合にはイメージ内のalt属性が音声出力されます。もうひとつ、SEOの重要な役割がありGoogleの検索に反映されます。

このタグについての詳しいページ:イメージ要素の簡単リスト|alt属性

title属性は噴出しチップを表示

この属性は全ての要素に含めることができます。サンプルとしてspan要素で囲んでみました。こちらにカーソルを重ねてください。
使い方としては画像にこの属性を指定してファイル名を表示させるくらいでしょうか。正直な話し、属性を記入する手間と文字数の分だけコーディングの負担になるのでメリットが見出せません。

この属性を指定することでSEOを上げる話しもありますが真偽のほどはわかりません。ここにこだわるのであれば他を頑張ったほうが良いかとボクは考えます。

IEはこのtitle属性をサポートしていないためチップを表示しません。代わりにalt属性の中身を表示します。

title属性

マウスオーバーされた際に噴出しチップを表示する。ユーザビリティ強化的な意味合いかと。音声ブラウザでは読まれません。

Google画像検索でヒットさせるための検証

過去に書いた記事alt属性title属性それぞれテキスト内容を変えて投稿してあるイメージがあります。そのイメージを検索して検証してみました。

検証に使ったイメージファイル

Googleで検索した画像

検証画像に指定されたalt属性とtitle属性の値
alt属性検索結果
属性に記述された値:イメージタグ サイズ指定

title属性検索結果
属性に記述された値:img_height_sample

以上のような結果になりました。title属性だとまったく表示されませんでした。