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
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

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