似たような意味合いのタグですが、実は用途が大きく違ったりします。今回はimg要素やa要素の違いについて調べていきたいと思います。
alt属性とtitle属性
<!--alt属性-->
<img alt="サンプル画像" src="sample.jpg" /></h4>
<!--title属性-->
<a title="HTMLタグまとめ" href="https://webpad.work/">オレのWEBPAD</a>
alt属性はimg要素だけのもの
alt属性はimg要素にしか入れられません。これは画像が表示されなかった場合に代わりに表示される代替テキストと呼ばれるものです。
IEの場合、この属性に指定されたテキストがマウスオーバーで噴出しとして表示されます。他のブラウザは表示されません。
alt属性
alt属性に指定されたテキストは画像がリンク切れの場合など何らかの原因で表示されない場合にテキストとして出力されます。
また、音声ブラウザの場合にはイメージ内のalt属性が音声出力されます。もうひとつ、SEOの重要な役割がありGoogleの検索に反映されます。
このタグについての詳しいページ：イメージ要素の簡単リスト｜alt属性
title属性は噴出しチップを表示
この属性は全ての要素に含めることができます。サンプルとしてspan要素で囲んでみました。こちらにカーソルを重ねてください。
使い方としては画像にこの属性を指定してファイル名を表示させるくらいでしょうか。正直な話し、属性を記入する手間と文字数の分だけコーディングの負担になるのでメリットが見出せません。
この属性を指定することでSEOを上げる話しもありますが真偽のほどはわかりません。ここにこだわるのであれば他を頑張ったほうが良いかとボクは考えます。
IEはこのtitle属性をサポートしていないためチップを表示しません。代わりにalt属性の中身を表示します。
title属性
マウスオーバーされた際に噴出しチップを表示する。ユーザビリティ強化的な意味合いかと。音声ブラウザでは読まれません。
