HTMLのtitle属性は要素の補足情報を表す属性です。
一般的にはツールチップ(tooltip)の形でカーソルを合わせるとtitle
属性に設定したテキストが表示される用途で使われます。
下記のサンプルコードを見てみましょう。
上記のコードのa
タグのリンクにカーソルを合わせて(クリックはしない)、しばらくすると「トップページへのリンク」とツールチップが表示されます。
※スマホでは表示されないので、確認する場合はPCでご確認ください。
もちろん今回のサンプルのように、要素がどういう機能を持っているものなのか正体が分かっているものであれば、title
属性による補足の説明はいらないですが、例えば世の中にはどういう機能なのか分かりにくいアイコンなどがあり、その補足の説明がほしいときに使える機能になります。
上記のサンプルではアイコンにカーソルをあわせると、補足情報が表示されます。
title
属性はグローバル属性で、すべてのHTMLのタグに対して設定可能です。
title
属性はすべてのHTMLの要素に対して設定可能で基本的には「補足情報」を表しますが、以下の要素に関してはtitle
属性は特別な意味を持ちます。
略語を表すabbr
要素ではtitle
属性は正式名称を表します。
例えば下記の例では略語は「スマホ」で、正式名称は「スマートフォン」となります。
abbr要素のtitle属性
<abbr title="スマートフォン">スマホ</abbr>
定義用語を表すdfn
要素でもtitle
属性は特別な意味を持ちます。dfn
要素のtitle
属性が設定されている場合はtitle
属性に設定されている言葉が定義用語になります。
menuitem
要素はmenu
要素とセットで利用されますが、メニューの項目を表します。menuitem
要素にtitle
属性が設定されている場合は項目のヒントを表します。
現在のHTMLとCSSなど別のファイルとの紐付けを行うlink
要素ではtitle
属性はリンク先のタイトルを表します。
HTMLでCSSでスタイルを記述できるstyle要素にtitle属性が設定されていると、スタイルシートの代替スタイルシートの設定が可能になります。
この部分もう少し掘り下げましょう。
Firefoxのブラウザではユーザーがスタイルシートを選択できる機能があります。(他のブラウザでも可能なものもある)
例えばスマホでも画面のテーマがダークモードなどありますが、同じように「通常モード」「ダークモード」のスタイルシートを用意しておきユーザーに選択させるといったことが可能です。
style
要素にtitle
属性を設定して、最初に登場したスタイルが優先的に適用されるスタイルです。2番目以降に登場するstyle
属性が代替のスタイルになります。
styleシートの
<style title="normal">
...
</style>
<style title="dark">
...
</style>