HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML要素に補足情報を追加する方法｜title属性の使い方を解説

title属性とは

HTML文書内の要素に補足情報を追加したい場合は、title属性を使用します。title属性に設定したテキストは、ユーザーがマウスカーソルを要素の上に重ねた際に、ツールチップ（小さな吹き出し）として表示されます。

title属性の主な用途

  • リンクやボタンに、クリック後の動作に関するヒントを加える
  • 画像に簡潔な補足説明を付ける
  • 略語の正式名称を示す

記述例

以下のコードは、base要素と組み合わせて、リンクおよび画像に対してtitle属性で追加情報を設定した例です。

<!DOCTYPE html>
<html>
<head>
    <title>HTML title属性のサンプル</title>
    <base href="https://www.qries.com">
</head>
<body>
    <p>
        <a href="/products" title="製品一覧ページへ移動します">Qries.com</a>
    </p>
    <img src="https://www.qries.com/images/banner_logo.png"
         alt="Qriesのバナーロゴ"
         title="Qries.comのロゴ画像">
</body>
</html>

このコードをブラウザで開き、リンクや画像の上にマウスカーソルを合わせると、title属性に設定したテキストがツールチップとして表示され、要素に関する追加情報をユーザーに伝えられます。

利用時の注意点

title属性の内容は、スマートフォンやタブレットなどタッチ操作のデバイスでは表示されません。そのため、重要な情報は本文中やalt属性にも必ず記述し、title属性はあくまで補足的な情報の提供に活用するのがおすすめです。また、検索エンジンの評価を左右する要素ではないため、SEO目的での乱用は避けましょう。

  1. HTMLの<title>要素の正しい使い方とSEO対策のポイント

    この記事では、HTMLの<title>要素の基本的な使い方から、SEOにおける重要性までをわかりやすく解説します。 HTMLの<title>要素は、ウェブサイトのページタイトルを表す要素です。 ページタイトルの確認方法 閲覧中のウェブサイトのページタイトルを確認したい場合は、ブラウザのタブにマウスカーソルを合わせて数秒間静止してみましょう。完全なページタイトルがポップアップ表示されます。 以下はYouTubeで実際に試した例です。 <title>要素の書き方 <title>要素を作成するには、開始タグと終了タグを使い、その間にタイトルとなるテキ

  2. HTMLで要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値