title属性

Updated 2015.01.18 / Published 2005.10.02

title属性は、ある要素に対して補足情報を付け足す属性です。多くの視覚環境の UA が title属性を指定した要素にポインティングデバイス(マウスやノートパソコン付属のトラックパッドなど)のカーソル（ポインタ）を合わせることで Tooltip（ツールチップ）をヘルプとして表示します。IE11ではキーボード操作だけでTooltip（ツールチップ）を表示する方法に対応しています。

非視覚環境においても補足情報として利用されることが期待されますが、音声出力環境（スクリーンリーダー、音声ブラウザ）における利用実態は、通常利用時ではどのソフトウェアも読み上げることはありません。フォーム関連の部品要素（select要素やinput要素）であればフォーカス時にしっかりと読み上げるので手厚いサポート状況ですが、a要素におけるtitle属性はオプション設定欄から読み上げる設定にしているか、ホットキー（ショートカットキー）を読み上げ時に操作した場合にのみ読み上げるという対応にとどまり、それ以外の要素に設けられたtitle属性を読み上げることは（わずか1製品が略語の展開をオプション設定でサポートしているぐらいのため）まずありません。

補足情報として読み上げることが期待されるなどアクセシビリティに配慮するために非視覚環境において再現（表現）しにくい要素には、積極的に title属性を使って補足情報をつけることが望まれるということで、hr要素や frame要素などに title属性を指定することが強く推奨されてきました。しかしながら、新仕様であるHTML5においては、UAにおけるtitle属性のサポートの強化（視覚ブラウザであればキーボード操作だけでツールチップを表示する、音声出力環境であればtitle属性がある場合に通知するなど）が進んでこなかった理由から、HTML5勧告時点（2014年10月28日）においてはtitle属性に頼ることを推奨しないとしています。ただし、IE11ではキーボード操作だけで提供できるようになっているなど、サポート強化の動きがまったくなかったというわけでもないため、今後のUAのサポートの強化次第で、再び二転することになるかもしれません。通常利用にとどめて、動向を見守る必要のある属性と言えます。

また、制作者スタイルシートを参照している link要素に title属性を組み合わせた場合、title属性は制作者スタイルシートをグループ化する特別な意味を持ちます。link要素で制作者スタイルシートを外部から参照させる場合に、link要素に title属性を指定することで、その制作者スタイルシートが優先的に読み込まれる優先スタイルシート（preferred style sheet）となります。優先スタイルシートは title属性で付けられた名前で制作者スタイルシートのグループ化を行います。なお、優先スタイルシートに対して、title属性をもたない link要素で参照する制作者スタイルシートを固定スタイルシート（persistent style sheet）と呼びます。

バージョン

HTML4.01(S,T,F)
XHTML1.0(S,T,F)
XHTML1.1

必須

非推奨

属性値

テキスト

title属性を指定できる要素型

A

B

C

D

E

em
embed

F

H

h1-h6
hr

I

K

L

M

N

O

P

Q

R

S

T

U

V

W

title属性のサンプル

制作者スタイルシートを参照している link要素に title属性を組み合わせた場合、title属性は制作者スタイルシートをグループ化する特別な意味を持ちます。

優先スタイルシート（preferred style sheet）

<link rel="stylesheet" href="sample.css" type="text/css" title="group">

代替スタイルシート（alternate style sheet）

<link rel="alternate stylesheet" href="sample.css" type="text/css" title="group">

固定スタイルシート（persistent style sheet）

<link rel="stylesheet" href="sample.css" type="text/css">

まず、優先スタイルシートとは UA に優先的に読み込ませる制作者スタイルシートです。代替スタイルシートとは標準では読み込まれない制作者スタイルシートで、ユーザ側で読み込ませるかどうかを選択可能なスタイルシートです。そして、通常の指定方法である固定スタイルシートは、固定的に読ませる制作者スタイルシートで、優先スタイルシートや代替スタイルシートと同時にスタイルを適用します。では、次のような場合に標準で適用される制作者スタイルシートはどれかを考えてみましょう。

<link rel="stylesheet" href="main.css" type="text/css">
<link rel="stylesheet" href="default.css" type="text/css" title="default">
<link rel="stylesheet" href="basic.css" type="text/css" title="basic">
<link rel="stylesheet" href="normal.css" type="text/css" title="basic">
<link rel="alternate stylesheet" href="alt.css" type="text/css" title="alt">

ここには計5つの制作者スタイルシートを参照するように link要素が記述されていますが、この5つの中で標準で適用されるスタイルシートは、わずか2つです。まず、代替スタイルシートである "alt.css" は適用されず、対して固定スタイルシートである "main.css" は適用されることは分かります。そして、"defalut.css", "basic.css", "normal.css" の3つの優先スタイルシートが残りました。この3つの優先スタイルシートの中で適用されるのは "defalut.css" のみです。title属性は、制作者スタイルシートをグループ化するのが役割であり、"defalut.css" は "defalut" のグループに属し、"basic.css" と "normal.css" の2つは "basic" のグループに属します。このように属するグループが異なる場合、UA はソースコードを上から順に解析していくので、記述されている順番が上のグループが優先的に適用されるスタイルシートとなり、同じ優先スタイルシートでもグループの異なるものは適用されません。しかし、Internet Explorer 6 に限っては優先スタイルシートをすべて読み込んでしまう実装になっています。

また、代替スタイルシートはFirefoxであれば「表示→スタイルシート」の手順で、ユーザ側で適用したいスタイルシートを切り替えることができます。この場合に代替スタイルシートである "alt" のグループを選択すると、"alt.css" と固定スタイルシートの "main.css" の2つのみが適用されます。