Html

imgタグのalt属性とtitle属性の違い

HTMLで画像を表示する際に使用するimgタグですが、属性としてaltとtitleがあります。 属性 意味 必須 alt 代替テキストを指定 ○ title 説明(補足情報)を指定 - alt属性は必須で代替テキストを指定し、title属性は省略可で説明を指定します。 実際どのような違いがあるのでしょうか。調べてみました。 alt属性 代替テキストを指定 画像を認識できない検索エンジンの説明として使う 指定すると画像を表示できないブラウザで表示され、音声読み上げソフトで読み上げられる img、input、applet、areaなど指定できる要素が限られてる title属性 要素の説明(補足情報)のために使う 指定すると多くのブラウザではカーソルを合わせたときに吹き出しで表示される imgだけでなくほとんどすべての要素で指定することが可能 title属性の表示を確かめてみます。 例 <!--title指定ありの画像--> <img src="sample.png" alt="サンプル画像1" title="サンプル表示のための画像"> <!--title指定ありのリンク--> <a href="http://www.google.co.jp/" title="検索サイトへ">google</a> 実際の表示 google カーソルを合わせたときにtitle属性で指定した説明が吹き出しで表示されると思います。ただ、画像の場合は画像が表示されているので吹き出しは特に必要なさそうですね。リンクの場合は、リンクをクリックする先の説明として利用すると有効かもしれません。 alt属性はアクセシビリティのために有効になりますし、SEO対策にもなりますのできちんと指定する方がよさそうです。