title=""

更新日
仕様 HTML Living Standard
分類 グローバル属性

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


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

属性
グローバル属性
title="" 要素の補足的な情報 テキスト 任意のテキスト

title属性によって示された補足情報は、要素にマウスカーソルを合わせた際にツールチップで表示されます。(PC向けの一般的なブラウザの場合)

title属性の用途

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

  • リンクの場合は、リンク先のタイトルや説明など。
  • 画像の場合は、画像の著作権情報、撮影場所、撮影日時、その他の説明など。
  • 引用の場合は、引用元に関する追加情報など。

また、以下の要素ではtitle属性に特別な意味が加わります。(詳細については各ページを参考にしてください)

link要素(別文書との関係を表す)
リンク先のタイトル
link要素(固定・優先・代替のスタイルシート)
スタイルの設定名
style要素(代替のスタイルシートを指定する)
スタイルの設定名
dfn要素(定義される用語を表す)
正確な定義用語
abbr要素(略語や頭字語を表す)
略される前の正式名称
input要素(pattern属性の指定時)
入力パターンの説明
draggable属性が指定された要素
要素の名前(?)

title属性の指定について

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

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

改行を入れると意味が変わってしまうような場合には、次のように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>

補足情報のテキストに < > & が含まれる場合は、&lt; &gt; &amp; と記述しておきます。

<p title="&lt;補足&amp;情報&gt;">要素の内容</p>

頼りすぎないようにする

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

指定できる要素

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

  • ただし、属性と要素の組み合わせによっては効果がない場合もあります。
旧HTMLからの変更点
  • HTML5:title属性値の改行が、そのまま反映されるようになりました。

使用例

いくつかの要素に指定した例

<p><a href="../../index.html" title="TAG indexのトップページへ">Home</a></p>

<p><img src="logo.png" alt="TAG index" title="6002バイト
89×47
(c) TAG index"></p>

<p title="親要素の補足情報">親要素と<span title="">「子要素に」</span>指定した例</p>

表示例

Home

TAG index

親要素と「子要素に」指定した例