imgの属性「alt」と「title」の使い分け

両属性の使い分けで何時も混乱、以前のウエブサイトは「alt=” “」を使用してIEで確認することがメインだったので良かったが、WordPressに替えて現在ではGoogleをメインで確認している。ところが「alt=” “」では、マウスオーバーで「ふきだし」として表示されない。調べて分かったのがIE以外では表示されないことで、属性を「title=” “」に書き換えて見たところ、Google、Firefox,Opera、とEdge(IE)も含めてメジャーなブラウザで表示されるようになった。

当ブログでは、Diary風の記事なので、SEO的に文書や中訳に説明等を付けること自体思いつかない。とにかく、Alt属性はimgに付けるもの、尚且つ、area、applet、inputに対しても付く、又、title属性は全ての要素に含めることができる。

基本的にはimgでのalt属性とtitle属性の使い分けは以下の通りとなるようだ。

<!–alt属性–>
<img src=”hoge.jpg” alt=”眠いよ~” />

<!–title属性–>
<a title=”眠気が襲ってきたね!” href=”#”>公園のベンチでの~んびり</a>

WordPressの場合は投稿ページのビジュアルで画像をクリック、編集画面から上級者向け設定の「画像タイトル属性」欄にTEXT文を書き更新すると自動的に「alt=” “」が「title=” “」に書き換えられる。

昔から画像上にふき出すTEXT文が気に入っているので、当ブログでもtitle属性「title=” “」で統一する事にした。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)