title属性 ≪ グローバル属性 ≪ HTML5入門

title属性

title属性は、要素の補足情報を指定するグローバル属性。

title属性を指定した要素の上にマウスカーソルを合わせると、title属性に指定したテキストを、ツールチップで表示するブラウザが多い。

ブラウザ対応

構文

<element title="補足情報">

補足情報: テキストで指定する。

要点

補足情報をテキストで指定する。
title属性に指定したテキストを、ツールチップで表示するブラウザが多い。
abbr要素など、要素によっては、title属性が特別な意味を持つことがある。
全てのHTML要素で使用できるグローバル属性である。

サンプルコード

<p title="補足情報">p要素</p>
<a href="#" title="リンク先タイトル">a要素</a>
<img src="hoge.png" title="2014/03/07に撮影">
<abbr title="HyperText Markup Language">HTML</abbr>

サンプル

HTMLソースコード

<span title="補足情報">span要素</span>
<a href="http://alphasis.info/javascript/" title="JavaScriptリファレンス" target="_blank">JavaScript</a>
<img src="sample-title.png" title="桜">
<abbr title="HyperText Markup Language">HTML</abbr>

実際の表示

span要素 JavaScript

HTML

サンプルの動作について

ほとんどのブラウザは、下記のようにツールチップを出現させる。

「span要素」にマウスカーソルを合わせると、ツールチップで「補足情報」と表示する。
「JavaScript」にマウスカーソルを合わせると、ツールチップで「JavaScriptリファレンス」と表示する。
画像にマウスカーソルを合わせると、ツールチップで「桜」と表示する。
「HTML」にマウスカーソルを合わせると、ツールチップで「HyperText Markup Language」と表示する。