【HTML Living Standard】title属性の使い方
title属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
titleプロパティは、HTML要素に追加情報を提供するグローバル属性を保持するプロパティです。この属性はLiving Standard版のHTMLにおいて、ほとんどすべてのHTML要素に指定可能であり、ユーザーが要素にマウスカーソルを合わせた際にツールチップとして表示される補足的な情報を定義するために使用されます。例えば、画像要素にその内容を説明するタイトルを設定したり、リンク要素に移動先のページに関する詳細情報を与えたりすることで、ユーザーがコンテンツをより深く理解する手助けとなります。
また、title属性は視覚的な情報だけでなく、アクセシビリティの観点からも重要です。スクリーンリーダーなどの支援技術は、この属性の値を要素のアクセス可能な名前として利用し、視覚障害を持つユーザーに要素の目的や機能について伝えます。これにより、ウェブページの利用体験が向上し、より多くの人々にとって使いやすいコンテンツを提供できます。ただし、重要な情報をtitle属性のみに含めることは避けるべきです。なぜなら、モバイルデバイスなどマウスオーバーが困難な環境では情報が伝わりにくいため、主要なコンテンツは常に目に見える形で提供することが推奨されます。この属性を適切に利用することで、ウェブサイトのユーザビリティとアクセシビリティを高めることができます。
構文(syntax)
1<element title="表示される補足情報となるテキスト"></element>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLのtitle属性でツールチップを表示する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <!-- title属性は<head>タグ内の<title>タグとは異なり、要素に補足情報を提供します --> 7 <title>title属性のサンプル</title> 8</head> 9<body> 10 11 <h1>title属性の利用例</h1> 12 13 <!-- p要素にtitle属性を適用: マウスカーソルを合わせるとツールチップが表示されます --> 14 <p title="これは段落の補足情報です。マウスを上に移動してください。"> 15 この段落にマウスカーソルを合わせると、title属性に設定されたテキストが表示されます。 16 </p> 17 18 <!-- a要素にtitle属性を適用: リンクの説明を提供します --> 19 <p> 20 <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/title" 21 title="MDN Web Docsのtitle属性に関する詳細情報ページへ移動します"> 22 MDN Web Docsでtitle属性についてもっと学ぶ 23 </a> 24 </p> 25 26 <!-- img要素にtitle属性を適用: 画像の追加情報を提供します (alt属性とは役割が異なります) --> 27 <p> 28 <img src="https://via.placeholder.com/150" alt="プレースホルダー画像" 29 title="これは150x150ピクセルのプレースホルダー画像です。"> 30 </p> 31 32 <!-- button要素にtitle属性を適用: ボタンの機能の説明を提供します --> 33 <button type="button" title="このボタンをクリックすると、何らかの操作が実行されます。"> 34 操作を実行 35 </button> 36 37</body> 38</html>
HTMLのtitle属性は、すべてのHTML要素に共通して適用できる「グローバル属性」の一つです。この属性は、要素に対する補足的な情報や説明を提供するために用いられます。ユーザーがウェブページ上の特定の要素にマウスカーソルを合わせた際、多くのウェブブラウザではtitle属性に設定されたテキストがツールチップとして表示されます。これにより、リンクの目的、画像の詳細、入力フィールドのヒントなど、要素の文脈を理解する上で役立つ情報を提供することができます。
サンプルコードでは、<p>要素にマウスカーソルを合わせると段落の補足情報が、<a>要素ではリンク先の詳細な説明が、<img>要素では画像に関する追加情報が、<button>要素ではボタンの機能説明がそれぞれツールチップとして表示される様子を示しています。title属性は特定の引数を取ることも、値を返すこともなく、属性値として直接文字列を設定するだけで機能します。
ただし、title属性に設定された情報は、キーボード操作のユーザーやスクリーンリーダーを利用するユーザーには伝わりにくい場合があります。そのため、重要な情報はtitle属性だけに頼らず、要素のテキスト内容や他の適切な属性（例えばalt属性など）と組み合わせて提供することが推奨されます。title属性は、ユーザーエクスペリエンスを向上させるための補助的な役割を果たす属性として活用されます。
title属性は、<head>タグ内の<title>タグとは異なり、HTMLの各要素に補足情報を提供するグローバル属性です。主に、要素にマウスカーソルを合わせた際にツールチップとして表示されるため、補助的な説明に利用するのが適切です。重要な情報はtitle属性だけに頼らないよう注意してください。スクリーンリーダーなどの補助技術では必ずしも読み上げられない場合があり、すべてのユーザーに情報が確実に伝わるとは限りません。例えば、リンクの目的や画像の重要な説明は、要素内のテキストやalt属性など、他の方法でも提供することが不可欠です。title属性は、ユーザーがコンテンツをより深く理解するためのヒントとして活用できますが、アクセシビリティの主要な手段ではないことを理解して利用しましょう。
html titleタグでツールチップを表示する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>タイトル属性（Global Attribute）のサンプル</title> 7</head> 8<body> 9 <h1>HTMLのグローバル属性「title」の利用例</h1> 10 11 <!-- 12 「title」属性は、ほとんどのHTML要素に適用できるグローバル属性です。 13 この属性に設定されたテキストは、要素の上にマウスカーソルを合わせたときに 14 ツールチップとして表示され、ユーザーに追加情報を提供します。 15 --> 16 17 <p title="この段落は重要な情報を含んでいます。カーソルを合わせてみてください。"> 18 この段落にマウスカーソルを合わせると、ツールチップが表示されます。 19 </p> 20 21 <button type="button" title="クリックすると何かアクションが実行されます。"> 22 ボタンにカーソルを合わせる 23 </button> 24 25 <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/title" 26 title="MDN Web Docsのtitle属性に関するページへ移動します。"> 27 title属性について学ぶ (外部リンク) 28 </a> 29 30 <img src="https://via.placeholder.com/150" alt="プレースホルダー画像" 31 title="これはダミーの画像です。画像の内容についての補足情報。"> 32</body> 33</html>
HTMLのtitle属性は、ウェブページ上のほとんどのHTML要素に指定できるグローバル属性の一つです。この属性の主な役割は、要素に関する補足情報や説明をユーザーに提供することにあります。
具体的な挙動としては、title属性が設定されたHTML要素にマウスカーソルを合わせると、その属性値として指定されたテキストがツールチップとして表示されます。これにより、ユーザーは要素の機能や内容について、より詳細な情報を得ることができます。例えば、サンプルコードでは段落（<p>）、ボタン（<button>）、リンク（<a>）、画像（<img>）など、様々な要素でtitle属性が使われており、それぞれの要素に対してマウスオーバー時に表示されるテキストが設定されています。
title属性は、引数を持ちません。これは、属性自体が何らかの処理のためにデータを受け取る構造ではないためです。同様に、属性を設定することで直接的な戻り値もありません。title属性は、プログラムのように特定の結果を返すのではなく、ブラウザがユーザーインターフェースの一部として情報を表示する役割を担っています。
この属性を利用することで、見た目だけでは伝わりにくい情報を補完し、ウェブページのユーザーエクスペリエンス（UX）向上やアクセシビリティの一助として活用することができます。
title属性は、ほとんどのHTML要素に適用できるグローバル属性で、マウスカーソルを要素に合わせた際にツールチップとして補足情報が表示されます。初心者が注意すべき点は、これがHTML文書全体のタイトルを定義する<title>タグとは異なり、SEOへの直接的な影響が限定的であることです。また、title属性に重要な情報のみを記述すると、キーボード操作のユーザーやスクリーンリーダーを利用する方には情報が伝わりにくくなる可能性があります。そのため、アクセシビリティを考慮し、要素の基本的な意味や主要な情報は要素自身のコンテンツとして記述するか、aria-labelなどの代替手段も検討するようにしてください。title属性はあくまで補助的な説明として、短く簡潔なテキストを設定し、ユーザー体験の向上を目的に活用するのが適切です。表示形式はブラウザに依存するため、細かなデザイン制御が難しい点も覚えておきましょう。