知らないと恥ずかしい？ title属性とalt属性の役割と違い・使い分け方【HTML】
使いそうで使う機会の少ないtitle属性。
やってることもalt属性と同じようなことをしてるし、違いがよくわからない方も多いかと思います。
今回はtitle属性とalt属性の役割と違い・使い分け方を解説します。
- ×：<title>こっちじゃないよ｜Jill Tone Blog</title>
- ◯：<img alt="画像だよ" title="こっちのtitleだよ">
title属性はツールチップで補足情報を表示するタグ
titleタグは補足情報を表示する属性。
title属性はあらゆる要素に補足情報を付加するタグです。
主な役割は要素にマウスカーソルを載せたときのツールチップの表示。
例えばリンクのaタグや画像のimgタグにtitle="戦場ヶ原ひたぎ"と入力しておくとマウスを載せて1秒ほど置くとに小さく「 戦場ヶ原ひたぎ 」と表示されます。
↑ の画像にオンマウスでツールチップが表示されます。
PCの方でしたらコチラ←の上や上記画像にマウスを乗せて1秒ほどじっとしてみてください。
（スマホでも使っているブラウザアプリによってはタップや長押しで表示されることもあります）
なお、<link>タグなど<head>内に入れて閲覧者には表示されないような要素も含め、title属性はほとんど全ての要素につけることができます。
そうしてコーディング時のメモ的な使い方をすることこ可能です。ただ、先述の通りtitle属性を入れる要素によってはオンマウスで閲覧者に表示されるので注意。
メモはコメントアウトの方が無難かも？
altは画像の代替テキストを指定する属性
画像リンク切れ時のalt属性 表示例。
altは画像を意味する<img>に指定する属性タグです。
代替テキストと書いた通り、画像の代わりにテキストが必要な場面で使われます。
- 目が見えない方が音声読み上げ機能を使うと、画像のalt属性内にあるテキストが読み上げられる。
- リンク切れなど画像が表示できないときに代わりに表示される。
- GoogleやYahoo!などのロボットが画像をクロールする際のヒント。
などがaltの主な使い道。
ときおり画像のalt属性に入れたテキストがツールチップで表示されると思い込んでいる方がいらっしゃいますが、通常alt属性はマウスを載せても表示はされません。
マウスを載せてツールチップとして表示されるのはtitle属性のみ。altにテキストを入れていてもオンマウスで出て来ることはないので、ツールチップを表示させたいならtitle属性で指定してあげましょう。
なお、どんな要素にでも入れられるtitle属性に対し、alt属性はimg要素以外では使われません。
altにあまりにもキーワードを詰め込みまくるとGoogleでの検索順位を下げられるなどペナルティを受ける可能性があります。
インターネット黎明期、直接表示されないことをいいことにalt属性にキーワードを詰め込みまくり検索順位を上げるスパム的な使い方をされたため。
そうした経緯からalt属性にはSEO効果は皆無、もしくは微々たるもの。しかし画像にalt属性を指定するのはHTMLの基本ルールであり、Googleも推奨しています。
あくまでも閲覧者のことを考え、画像の内容を説明したテキストを入力しましょう。
なお、ただの線などコンテンツではなくデザインとしての画像の場合はalt=""とカラで指定しても構いません。逆に言えばカラでもいいので<img>タグにalt属性は必須な点に注意しましょう。
title属性はいまではほとんど使われていない
Google検索トップページのGoogleロゴもalt属性は入れているが、title属性は指定していない。
実のところ、titleタグを使う必要性はあまりないのが現状。特にSEO効果もありません。
マウスカーソルが存在しないスマホ＆タブレットが主流になるにつれてツールチップ自体あまり使われなくなりました。
昔はjQuery / Javascript＆CSSでツールチップをデザインしたりもしましたけど、いまどきはもう流行りません。
以前はWordPressでもリンク作るときにtitle属性が自動入力されていたように思いますが、現在では入らなくなっています。やはり不要ということでしょう。
略語を示す<abbr>タグを使うときなどはっきりとした目的がなければわざわざtitle属性を指定しなくていいでしょう。
しかし、先述の通り画像タグにalt属性は必須です。中身がカラでもいいので必ず入れておきましょう。
実際、Google検索トップページのGoogleロゴタグにもtitle属性はありませんが、alt属性はきちんと入っています（2019年5月2日）。
まとめ：title属性とalt属性の違い
- title属性はマウスオーバー時にツールチップで表示されるテキストを入力する。
- title属性はimg以外にaタグやlinkタグなどあらゆる要素に指定していい。
- alt属性は画像の代替テキストを指定するタグで、画像リンク切れ時や音声読み上げブラウザで使われる。
- alt属性が使われるのはimgタグのみで、内容がカラでも存在は必須。