+RECOMMEND
+RECOMMEND
+Ad
+OTHERS

無料ブログ作成サービス JUGEM

paperboy&co.
RSS 1.0
ATOM  0.3
<< November 2018 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>
<< 35のフリーアイコン素材 | main | オライリーの表紙も作れる?中世の挿絵を集めたサイトの紹介 >>
Alt と Title の違いまとめ
AltとTitleの違いについて
よくHTMLコーディングのとき、画像のaltは設定するんですが、titleはLightbox系のAjaxやTooltipを使用する時ぐらいにしか気にしていませんでした。最近HTML5のコーディングを始めたので、ついでにこのあたりの基礎も勉強しなおすか、ということでAltとTitleの違いについてまとめてみました。
Alt
これは画像の代換用の属性。なので、画像が表示されない場合や音声読み上げ、テキストブラウザなどに対処するために使う。
ですので、IEなどで画像の上にマウスカーソルをもっていくと、Altのテキストが表示されますが、それように使用するためのものではありません。

HTML5ではさらに厳格に規定されているようです。

簡単にまとめると、イメージのタイトルを alt 属性に入れるのではなく、そのイメージが表すものを言葉で説明した文章を入れなさい、ということです。画像が使われる状況にもよりますが、もし画像が表示されず、文章だけが表示されたとした場合、前後の文章と、そのイメージの alt 属性の文章が、シームレスにつながることが肝要とのことです。

HTML5.jp alt属性の使い方が厳密に規定されたHTML5のimg要素から

と小難しいことが書いてあります。

Titel
一方Titel属性はこのように記述がありました。

title 属性は、その要素のツールチップとして適切となるような、補足情報を表します。この属性は、リンクであれば、リンク先のリソースの表題や説明になるでしょうし、画像であれば、その画像の著作権表示や説明になるでしょう。また、段落であれば、テキストの脚注や解説になるでしょうし、引用であれば、引用元に関する追加情報になるでしょう。
HTML5.jp title 属性から

とあるように補足情報がメインのようです。
ブラウザ機能でのツールチップで表示させたい場合はこちらを入れ込むようです。

まとめると、
Altはその画像の代換かつその画像をわかりやすく表すようにしなければならないようです。
Titleはそれに対しての補足情報という捕らえ方でいいんでしょうか。

なんだか書いててよくわからなくなってきますね。Altでわかりやすく説明文書いたら、それ補足になるんじゃね?的な印象を受けてしまいますが、引用部にあるように、Titleはリンクがあればリンク先の情報や、画像の著作権情報などと書いてあるように、画像そのものの情報以外の補足説明でも良い印象を受けました。

詳しい解説はこちらからどうぞ
HTML5.jp
http://www.html5.jp/


※補足ですが現状Alt属性は必須になっており、Altを書かずにHTMLをvalidateするとエラーを返されてしまいます。ですがHTML5では省略してもよいのでは?という意見も出ているようです。
WHATWG - 『Alt属性をなぜ省略しても良いのか』日本語訳
http://www.html5.jp/trans/whatwg_omit_alt.html


まだ正式な使用として確定ではありませんが、今後の参考になれば幸いです。




HTML5&API入門
HTML5&API入門
株式会社あゆた
| HTML | 18:06 | comments(0) | trackbacks(0) | - | - |はてなブックマーク - Alt と Title の違いまとめ | このエントリーをはてなブックマークに追加









http://blog.tug.lomo.jp/trackback/987665