BlogWindows10とかPCとかマウスとかキーボードとかとか。title属性とalt属性の役割と違い・使い分け方【HTML】2019年5月2日B!使いそうで使う機会の少ないtitle属性。やってることもalt属性と同じようなことをしてるし、違いがよくわからない方も多いかと思います。今回はtitle属性とalt属性の役割と違い・使い分け方を解説します。本記事で扱うのはhead内に書き込む要素としてのtitleタグではなく、要素に指定する属性としてのtitleタグです。まとめ:title属性とalt属性の違いスポンサーリンクtitle属性はツールチップで補足情報を表示するタグtitleタグは補足情報を表示する属性。title属性はあらゆる要素に補足情報を付加するタグです。主な役割は要素にマウスカーソルを載せたときのツールチップの表示。画像にオンマウスでツールチップが表示されます。PCの方でしたらコチラ←の上や上記画像にマウスを乗せて1秒ほどじっとしてみてください。(スマホでも使っているブラウザアプリによってはタップや長押しで表示されることもあります)なお、<link>タグなど<head>内に入れて閲覧者には表示されないような要素も含め、title属性はほとんど全ての要素につけることができます。してコーディング時のメモ的な使い方をすることこ可能です。先述の通りtitle属性を入れる要素によってはオンマウスで閲覧者に表示されるので注意。altは画像を意味する<img>に指定する属性タグです。代替テキストと書いた通り、画像の代わりにテキストが必要な場面で使われます。目が見えない方が音声読み上げ機能を使うと、画像のalt属性内にあるテキストが読み上げられる。リンク切れなど画像が表示できないときに代わりに表示される。GoogleやYahoo!などのロボットが画像をクロールする際のヒント。画像の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効果もありません。マウスカーソルが存在しないスマホ&タブレットが主流になるにつれてツールチップ自体あまり使われなくなりました。Javascript&CSSでツールチップをデザインしたりもしましたけど、いまどきはもう流行りません。以前はWordPressでもリンク作るときにtitle属性が自動入力されていたように思いますが、現在では入らなくなっています。不要ということでしょう。略語を示す<abbr>タグを使うときなどはっきりとした目的がなければわざわざtitle属性を指定しなくていいでしょう。先述の通り画像タグにalt属性は必須です。中身がカラでもいいので必ず入れておきましょう。実際、Google検索トップページのGoogleロゴタグにもtitle属性はありませんが、alt属性はきちんと入っています(2019年5月2日)。まとめ:title属性とalt属性の違いtitle属性はマウスオーバー時にツールチップで表示されるテキストを入力する。title属性はimg以外にaタグやlinkタグなどあらゆる要素に指定していい。alt属性は画像の代替テキストを指定するタグで、画像リンク切れ時や音声読み上げブラウザで使われる。alt属性が使われるのはimgタグのみで、内容がカラでも存在は必須。...【HTML】aタグへのname属性はもうやめよう。ページ内リンクも動かず、AMPエラーが出る。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。スパム対策のため日本語が含まれない投稿は無視されます。...Android版twitterアプリが開けない場合の対処方法【繰り返し終了】Android版twitterアプリが強制終了し開けないエラーが発生中。