title属性 | HTMLタグリファレンス

title属性とは?

HTMLのtitle属性要素の補足情報を表す属性です。

title属性の用途

一般的にはツールチップ(tooltip)の形でカーソルを合わせるとtitle属性に設定したテキストが表示される用途で使われます。

下記のサンプルコードを見てみましょう。

上記のコードのaタグのリンクにカーソルを合わせて(クリックはしない)、しばらくすると「トップページへのリンク」とツールチップが表示されます。
※スマホでは表示されないので、確認する場合はPCでご確認ください。

もちろん今回のサンプルのように、要素がどういう機能を持っているものなのか正体が分かっているものであれば、title属性による補足の説明はいらないですが、例えば世の中にはどういう機能なのか分かりにくいアイコンなどがあり、その補足の説明がほしいときに使える機能になります。

上記のサンプルではアイコンにカーソルをあわせると、補足情報が表示されます。

title属性を指定できる要素

title属性はグローバル属性で、すべてのHTMLのタグに対して設定可能です。

title属性が特別な意味となる要素

title属性はすべてのHTMLの要素に対して設定可能で基本的には「補足情報」を表しますが、以下の要素に関してはtitle属性は特別な意味を持ちます。

abbr要素

略語を表すabbr要素ではtitle属性は正式名称を表します。

例えば下記の例では略語は「スマホ」で、正式名称は「スマートフォン」となります。

abbr要素のtitle属性

<abbr title="スマートフォン">スマホ</abbr>
<abbr>
abbr要素は略語を表します。abbr要素のtitle属性は「正式名称」を表し、abbr要素とセットで利用されます。abbrの使い方をサンプルコード付きで解説します。

dfn要素

定義用語を表すdfn要素でもtitle属性は特別な意味を持ちます。dfn要素のtitle属性が設定されている場合はtitle属性に設定されている言葉が定義用語になります。

<dfn>
dfn要素は用語を定義する際の用語の定義用語の部分に使われるタグです。使い方や属性について解説します。

menuitem要素

menuitem要素はmenu要素とセットで利用されますが、メニューの項目を表します。menuitem要素にtitle属性が設定されている場合は項目のヒントを表します。

<menuitem>
menuitemはユーザーが操作できるメニューの項目を表します。ただしこのタグはHTML5では利用は非推奨のタグとなっており、Firefox以外ほとんどのブラウザで対応していません。

link要素

現在のHTMLとCSSなど別のファイルとの紐付けを行うlink要素ではtitle属性はリンク先のタイトルを表します。

style要素

HTMLでCSSでスタイルを記述できるstyle要素にtitle属性が設定されていると、スタイルシートの代替スタイルシートの設定が可能になります。

この部分もう少し掘り下げましょう。

Firefoxのブラウザではユーザーがスタイルシートを選択できる機能があります。(他のブラウザでも可能なものもある)

例えばスマホでも画面のテーマがダークモードなどありますが、同じように「通常モード」「ダークモード」のスタイルシートを用意しておきユーザーに選択させるといったことが可能です。

Photo byFree-Photos

style要素にtitle属性を設定して、最初に登場したスタイルが優先的に適用されるスタイルです。2番目以降に登場するstyle属性が代替のスタイルになります。

styleシートの

<style title="normal">
  ...
</style>

<style title="dark">
  ...
</style>