HTML
この記事では「HTML」について、基本の意味と使い方を初心者向けにやさしく説明します。
この記事でわかること
title属性が提供する補足情報- ツールチップだけに頼ってはいけない理由
- 見える説明文や適切なラベルを優先する設計
HyperText Markup Language title attribute.
title属性
title属性は、要素の補足情報を表します。
Sample source
<p><a href="https://yugien.xyz/" title="トップページへ">Home</a></p>
この補足情報は、PC向けの一般的なブラウザではツールチップで表示されます。
title属性の用途
title属性は、例えば次のような用途に使用することができます。
- リンクの場合は、リンク先のタイトルや説明など。
- 画像の場合は、画像の著作権情報、撮影場所、撮影日時、その他の説明など。
- 引用の場合は、引用元に関する追加情報など。
また、以下の要素では title属性に特別な意味が加わります。
- abbr要素
- 略される前の正式名称。
- dfn要素
- 定義される用語。
- link要素
- リンク先のタイトル。
- style要素
- スタイルのタイトル。
title属性の指定について
title属性の値に改行を入れると、補足情報が複数の行に分割されることになります。
<p><a href="https://yugien.xyz/" title="遊戯苑の
トップページへ">Home</a></p>
改行を入れると意味が変わってしまうような場合には、次のように1行で記述しておきます。
<abbr title="HyperText Markup Language">HTML</abbr>
また、title属性で指定した補足情報は、その子孫要素にも関係することになります。次の例では、p要素に指定した補足情報が span要素にも適用されます。
<p title="補足情報">p要素の内容<span>span要素の内容</span></p>
子孫要素に影響を与えたくない場合は、次のように空の title属性を指定しておきます。この場合、span要素には補足情報がないことを表しています。
<p title="補足情報">p要素の内容<span title="">span要素の内容</span></p>
頼りすぎないようにする
ユーザーの環境によっては、title属性の値が表示されない場合もあります(スマホやタブレット等)。そのため、HTML5の仕様書では「この属性に頼ることは推奨しない」とされています。
指定できる要素
title属性はグローバル属性のため、HTML5の全ての要素に指定することができます。
HTML5における変更点
title属性値の改行が、そのまま反映されるようになりました。

