SYNCERのロゴ
アイキャッチ画像

title属性 - 要素のタイトル

title属性は、要素のヒントを表す属性です。例えば、ハイパーリンクならリンク先のタイトル、画像ならクレジット情報、撮影者、パラグラフではテキストの脚注や注釈などを指定します。マウスデバイスだったらマウスホバー時にツールチップが表示されます。この属性が省略された場合、最も近い祖先のtitle属性が適用されます。継承を防ぐため、明示的に空の値を指定しても大丈夫です。

概要

DOM Interface
HTMLElement.title
仕様書
https://html.spec.whatwg.org/multipage/dom.html#attr-title

要素のヒントを表すテキスト。ただし、abbr要素の場合は中身のテキストの正式名称でなければいけない。

<p><a href="https://syncer.jp/" title="SYNCER">このサイト</a>にアクセスして下さい。</p>
<abbr title="スマートフォン">スマホ</abbr>

説明

要素のヒント

要素のヒントとなるテキストを指定します。例えば、ハイパーリンクのリンク先のタイトルなどが挙げられます。例えばデザイン上、ページタイトルの文字数を省略しないといけない場合など、title属性に全文字を指定しておくとユーザーフレンドリーになるでしょう。

<a href="https://syncer.link/14" title="高知は凄かった!私が高知旅行へ行った時のレポートを紹介します!">高知は凄かった!私が…</a>

中身のテキストをタイトルにして、title属性に簡単な説明を指定しておくのもいいと思います。

<a href="https://syncer.link/8693" title="title属性は、要素にヒントを紐付けるためのグローバル属性です。">title属性</a>

値の継承

値は子孫に継承されます。例えば下記の場合、2つのp要素には、親のdiv要素のtitle属性が適用されるということです。

<div title="高知旅行のレポート">
	<p>私はある日、高知県に観光に行った。</p>
	<p>最初に行ったのは有名な桂浜公園だ。</p>
</div>

値を継承したくない場合は、title属性を付けて親の値を上書きして下さい。空の値を指定すれば、ヒントは存在しないということを明示できます。なかなかないケースだとは思いますが、こういう仕様担っているということを覚えておきましょう。

<div title="高知旅行のレポート">
	<p title="">私はある日、高知県に観光に行った。</p>
	<p title="桂浜海岸">最初に行ったのは有名な桂浜公園だ。</p>
</div>

abbr要素

abbr要素においてはtitle属性の意味が変わります。中身のテキスト(略称)に対応する正式名称を指定するための属性となります。

<abbr title="National Aeronautics and Space Administration">NASA</abbr>

デモ

title属性のデモです。マウスデバイスの方は、ホバーした時にツールチップが表示されるのを確認しましょう。

<!-- このコードは編集できます。 -->

<p>
	<a href="https://syncer.link/8693" title="title属性は、要素にヒントを紐付けるためのグローバル属性です。">title属性</a>
</p>

<p>
	<img src="./photo.jpg" alt="大分県の写真" title="撮影日: 2017年1月12日" width="200" height="150">
</p>

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年9月23日 (土)
コンテンツを公開しました。