title属性でユーザビリティーの向上！！

こんにちは。
達人ブログです。

本日は「title属性」についてご紹介します。

「title属性」はつけたものに対しての説明を記載するもので、title属性がついたHTMLの上にカーソルを置くと、指定した表示がポップアップとなって出てきます。

実際の書き方はタグにtitleを指定するだけです。(タグ等一部省略)

img src="/hoge/hoge.jpg" title="詳細"

上記のような書き方でOKです。

これで、指定したHTMLの上にカーソルを合わせると「詳細」という文字がポップアップとなって表示されます。

「詳細」等の固定値の場合は上記の書き方で構いませんが、変数を利用したい場合は、ダブルクオーテーションとシングルクオーテーションが必要です。JQuery等ではプラス「＋」記号も必要になることがあります。

var hoge_html = class="var" title=" ' + data.member_name + ' "(タグ等省略)

この書き方でdata.member_nameのデータがポップアップで表示されます。

ちなみにtitle属性でSEO効果はさほど期待できませんので、SEOを狙っている方は他の手法で攻めた方が良さそうです。

本日はtitle属性についてご紹介しました。

ではまた次回に。