説明
下記は、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というゲームが昔、人気だった。