画像をwebサイトに上げる際に使用するaltとtitleについて
ブログを書く場所
このブログはベランダでアウトドア用のチェアに座りながら書いています。日光浴をしながら自分のできることをしようというのが目的です。 確かに外は寒いですが、日差しがしっかりしているので足元さえなんとかなれば十分外に出て何かをすることができます。こうしたことの積み重ねが病気を治してくれるのではないかなと少しだけですが期待をしています。
先日書いたDropboxの画像をブログに表示させる中での疑問
Dropboxの共有リンクに手を加える
先日このブログで、Dropboxにアップロードしている画像を、ブログに表示させるという話をしました。
実際に下のようなURLを作ってブログにアップすると画像として表示されます。 （下のURLはあえてURLとして表記をしています。
https://dl.dropboxusercontent.com/s/hogehogehogehoge/IMG_hallo.JP
この方法のメリットとしては色々とあるのですが、はてなブログであれば画像データの容量を気にすることなく、アップすることができるというものがあります。
ブログを会話形式で表示する上で、会話の主のアイコンをDropboxから取ってくるときに通常の共有リンクでなく、URLを一部変更するという内容のものでした。
imgタグを使用する中で
で、先ほど作ったURLを使ってimgタグを作ろうとした時に気になったのが、altとtitleです。
僕的にはどちらともimgタグ内で使用する画像の説明をするもので、もし画像が表示されなかった時のためのものという理解でした。
でもやはりふたつそれぞれ存在するわけですから何か違いがあるんだろうなということで調べてみるとやはり違いはありました。
まずはaltとtitleをネットで調べた
まずはインターネット上のサイトから調べた情報を引用として使用します。
alt属性とは
画像を端的に説明するためのテキスト内容
何らかの理由で画像が表示されなかった際(ローディングエラーやアドレス消失 など)に表示さる代替テキスト
SEOに大きく関わる
主に適用されるhtmlタグ
img が最も多く他に input, area など
title属性とは
要素の補足説明をするためのもの
いわゆる「ツールチップ」
主に適用されるhtmlタグ
a が最も多く ほぼ全ての要素に使える(img含む)
altとtitleは属性。要素の説明をする
altとtitleはタグではないようです。属性という要素を補足説明するものです。
altは代替テキスト、titleは説明（補足情報）
alt属性は画像が表示されない時にその画像がなんなのかを説明します。一方でtitle属性などんな要素にもつき、その要素を説明するものです。
なので、僕はふたつとも使う
なので、僕はimg要素を使用する時はalt属性もtitle属性も使用するようにします。記載内容については特に分けるつもりはありません。
終わりに
やはりHTMLって奥が深いですね。調べていくとなかなか理解できない内容や、サイトによっては記載内容が違うことも。 これは解釈の違いですし、自分なりの理解の仕方ということで、誰が間違っているとか誰が正しいとかはないと思います。 ただ、間違った記載内容だけはしないようにしないといけないですな。 そこは気をつけようと思いました。
