HTML

HyperText Markup Language title attribute.

title属性

 title属性は、要素の補足情報を表します。

Sample source


<p><a href="https://www.yugien.xyz/" title="トップページへ">Home</a></p>

Home

 この補足情報は、PC向けの一般的なブラウザではツールチップで表示されます。

ツールチップが表示されている様子

title属性の用途

 title属性は、例えば次のような用途に使用することができます。

 また、以下の要素では title属性に特別な意味が加わります。

abbr要素
略される前の正式名称。
dfn要素
定義される用語。
link要素
リンク先のタイトル。
style要素
スタイルのタイトル。

title属性の指定について

 title属性の値に改行を入れると、補足情報が複数の行に分割されることになります。


<p><a href="https://www.yugien.xyz/" title="遊戯苑の
トップページへ">Home</a></p>

Home

ツールチップが改行されて表示されている様子

 改行を入れると意味が変わってしまうような場合には、次のように1行で記述しておきます。


<abbr title="HyperText Markup Language">HTML</abbr>

 また、title属性で指定した補足情報は、その子孫要素にも関係することになります。次の例では、p要素に指定した補足情報が span要素にも適用されます。


<p title="補足情報">p要素の内容<span>span要素の内容</span></p>

 子孫要素に影響を与えたくない場合は、次のように空の title属性を指定しておきます。この場合、span要素には補足情報がないことを表しています。


<p title="補足情報">p要素の内容<span title="">span要素の内容</span></p>

頼りすぎないようにする

 ユーザーの環境によっては、title属性の値が表示されない場合もあります(スマホやタブレット等)。そのため、HTML5の仕様書では「この属性に頼ることは推奨しない」とされています。

指定できる要素

 title属性はグローバル属性のため、HTML5の全ての要素に指定することができます。

HTML5における変更点

 title属性値の改行が、そのまま反映されるようになりました。