title - タイトル、補足情報を指定する

titleは、要素にタイトルや補足情報を付加するための属性です。この属性が指定された要素は、マウスカーソルを重ねた時にツールチップが表示されるようになります。なお、abbr要素に指定した時だけ、この属性は「正式名称を指定する」という役割になります。

説明

下記は、p要素にtitle属性を指定した例です。マウスカーソルを重ねた時に、タイトルのツールチップが表示されるのを確認して下さい。

HTML

<p title="SYNCER">おはよう</p>

おはよう

例えば、a要素において、デザインの都合上、全てのアンカーテキストを表示できない場合にtitle属性に指定しておくと、ユーザーがリンクをクリックしてページ移動をせずに、ツールチップで内容を確認できるので親切です。

HTML

<p><a title="これは凄い!今年の秋に行きたい紅葉スポット10選!">これは凄い!今年の秋に…</a></p>

子要素に継承される

title属性が指定されていない要素は、親要素に指定されているtitle属性を継承します。下記の場合、最初の3つのp要素は、親であるdiv要素に指定された「これは良い挨拶です。」という補足情報を受け継ぎます。しかし、4つ目のp要素は、それ自身にtitle属性が指定されているため、受け継ぎません。意図せず、title属性が指定されてしまうことのないように注意しましょう。

HTML

<div title="これは良い挨拶です。">
	<p>おはよう</p>
	<p>こんばんは</p>
	<p>こんにちは</p>
	<p title="これはあまり良くない挨拶です。">こんにちわわ</p>
</div>

おはよう

こんばんは

こんにちは

こんにちわわ

abbr要素の場合

略語を示すabbr要素にtitle属性を指定すると、それは「正式名称」だと解釈されます。例えば、下記の場合、「正しくない例」のマークアップ方法では、DQの正式名称が「面白いゲームだよ」だと解釈されてしまいます。

HTML

<!-- 正しい例 -->
<p><abbr title="Dragon Quest">DQ</abbr>というゲームが昔、人気だった。</p>

<!-- 正しくない例 -->
<p><abbr title="面白いゲームだよ">DQ</abbr>というゲームが昔、人気だった。</p>

DQというゲームが昔、人気だった。

DQというゲームが昔、人気だった。

参考情報

title属性に関する情報は、下記ページで確認できます。

  • W3C … W3Cによる勧告案。
  • WHATWG … WHATWGによる仕様書、HTML Living Standard。