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

HTMLの要素におけるrel属性の使い方と設定できる値を解説

<area>要素のrel属性は、現在のドキュメントとリンク先のドキュメントとの関係性（リレーション）を指定するために使用します。この属性は、HTML5で<area>要素に対して新たに導入されました。

rel属性の基本構文

rel属性の基本的な書き方は以下のとおりです。

<area rel="value">

「value」の部分には、リンク先との関係を表す以下のいずれかのキーワードを指定できます。

rel属性に指定できる主な値

  • alternate：ドキュメントの代替バージョンへのリンク（例：印刷用ページなど）
  • author：ドキュメントの著者へのリンク
  • bookmark：ブックマーク用の固定URL（パーマネントリンク）
  • help：ヘルプドキュメントへのリンク
  • license：著作権やライセンス情報へのリンク
  • next：一連のドキュメントにおける次のページへのリンク
  • nofollow：検索エンジン（Googleなど）にクロールさせたくないリンクであることを示す
  • noreferrer：ユーザーがハイパーリンクをクリックした際に、HTTPリファラーヘッダーを送信しないようブラウザに指示する
  • prefetch：リンク先のドキュメントを事前にキャッシュすべきであることを示す
  • prev：一連のドキュメントにおける前のページへのリンク
  • search：ドキュメントを検索するためのツールへのリンク
  • tag：現在のドキュメントに関連するタグ（キーワード）へのリンク

rel属性の実装例

それでは、実際に<area>要素のrel属性を使ったサンプルコードを見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<h2>Learning</h2>
<p>Learn these technologies with ease....</p>
<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>
<map name = "tutorials">
    <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
       href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" rel="alternate"/>
    <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
       href = "/html/index.htm" target = "_blank" />
    <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
       href = "/php/index.htm" target = "_blank" />
</map>
</body>
</html>

コードの解説

上記の例では、まず次のように画像に対してイメージマップを設定しています。

<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>

続いて、<map>要素内に複数の<area>要素を配置し、それぞれ異なる形状（shape）のクリック領域を定義しています。

<map name = "tutorials">
    <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
       href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" rel="alternate"/>
    <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
       href = "/html/index.htm" target = "_blank" />
    <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
       href = "/php/index.htm" target = "_blank" />
</map>

ここで注目すべきは、最初の<area>要素（多角形の領域）に、次のようにrel属性が指定されている点です。

rel="alternate"

これにより、Perlチュートリアルへのリンクが「元のドキュメントの代替バージョン」であることを、ブラウザや検索エンジンに伝えることができます。このように、rel属性を活用することで、リンク先との関係性を意味的に明示でき、SEOやアクセシビリティの観点からも有効です。

  1. HTMLのstyle属性とは？構文と使い方をサンプルコード付きで解説

    HTMLのstyle属性は、ドキュメント内の個々の要素に対してインラインスタイルを直接指定するための属性です。style属性はグローバル属性に分類されるため、すべてのHTML要素で使用できるのが特徴です。 style属性の基本 style属性の値には、「プロパティ名: 値;」という形式でCSSを記述します。複数のスタイルを同時に指定したい場合は、セミコロン（;）で区切って並べることで、1つの要素にまとめてスタイルを適用できます。 構文 style属性の基本的な構文は次のとおりです。 <タグ名 style="CSSプロパティ: 値;"></タグ名> そ

  2. HTMLのstart属性とは？順序付きリストの開始番号を指定する方法

    HTMLのstart属性は、順序付きリスト（<ol>要素）において、最初のリスト項目に付与される番号（開始値）を指定するための属性です。通常、順序付きリストは「1」から自動的に採番されますが、start属性を使うことで、任意の番号からリストを開始させることができます。 構文 start属性の基本的な構文は以下のとおりです。 <ol start="number"></ol> start属性の値には正の整数を指定します。例えば「5」を指定すれば、リストは「5、6、7…」というように採番されます。 使用例 それでは、HTMLのstart属性を使