title属性

マウスを上にのせると、追加情報を表示させることができます。

本ページでは、title属性について説明します。

title属性とは

titleを使うと、マウスを上にのせた時に追加情報を表示させることができます。

グローバル属性のため、すべてのHTML要素で使えます。

titleの利用例は、以下のとおりです。

【title利用例】

<p><abbr title="HyperText Markup Language">HTML</abbr>は、メモ帳で作成できます。</p>

abbr要素は、略語を示します。title属性を使って、追加情報として正式名称を記述しています。

実行例は、以下のとおりです。

HTMLは、メモ帳で作成できます。

テキストの下に点線があるHTMLの上にマウスを移動させると、HyperText Markup Languageと表示されます。

以下のように、改行して記述すると、表示上も改行されます。

【titleで改行する例】

<p><abbr title="HyperText 
Markup Language">HTML</abbr>は、メモ帳で作成できます。</p>

また、title属性は子要素に継承されます。以下は、例です。

【titleの継承】

<div title="説明">
<p>HTMLは、メモ帳で作成できます。</p>
<p>違う話題です。</p>
</div>

上記は、2つの段落どちらにマウスをのせても「説明」が表示されます。

2つ目の段落で表示したくない場合、title=""で打ち消す必要があります。

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目	IE	Ed	Fx	Ch	Sa	Op
title	〇	〇	〇	〇	〇	〇

【スマートフォン】
項目	Sa	An	Op	Ch	Fx	Sm
title	〇	〇	〇	〇	〇	〇

※スマートフォンのFirefoxとChromeは、Android版です。