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

HTMLのarea要素におけるhreflang属性の使い方を解説

HTMLの<area>要素に用意されているhreflang属性は、クリッカブルマップ内のリンク領域が指すURL（リンク先ページ）の言語を指定するための属性です。検索エンジンやブラウザに対して、リンク先がどの言語で書かれているかを明示的に伝えることができます。

hreflang属性の基本構文

<area hreflang="language_code">

language_code の部分には、ISO 639-1規格に基づく言語コードを指定します。主な言語コードの例は以下の通りです。

  • 英語 → en
  • フランス語 → fr
  • ドイツ語 → de
  • 中国語 → zh
  • 日本語 → ja

hreflang属性の実装例

それでは、<area>要素でhreflang属性を使った具体的なサンプルを見てみましょう。ここでは1枚の画像にイメージマップを設定し、複数のリンク領域を作成しています。

サンプルコード

<!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" download="perl" hreflang="en"/>
    <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
       href = "/html/index.htm" target = "_blank" download="html" hreflang="en"/>
    <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
       href = "/php/index.htm" target = "_blank" download="php" hreflang="en"/>
</map>
</body>
</html>

出力結果

HTMLのarea要素におけるhreflang属性の使い方を解説

コードの解説

1. イメージマップの対象となる画像を配置

まず、<img>要素のusemap属性を使って、画像とマップを関連付けています。

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

2. map要素内にarea要素でリンク領域を定義

次に、<map>要素の中に<area>要素を配置し、shape属性（poly＝多角形、rect＝矩形、circle＝円形）とcoords属性（座標）によって、それぞれ異なる形状のクリック可能な領域を定義しています。

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

3. hreflang属性でリンク先の言語を指定

各<area>要素では、hreflang属性によってリンク先URLの言語を以下のように指定しています。

hreflang="en"

この例ではすべて英語のページへのリンクであるため、「en」（English＝英語）を設定しています。もしリンク先が日本語のページであれば「ja」、フランス語のページであれば「fr」のように、リンク先の実際の言語に合わせて値を変更してください。

まとめ

hreflang属性は、多言語サイトを運営する際にリンク先ページの言語を正しく伝えるための重要な属性です。<a>要素や<link>要素でも同様に使用できるため、国際化対応のWebサイトを構築する際にはぜひ活用しましょう。

  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属性を使