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

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

type属性とは

HTMLの<area>要素に設定できるtype属性は、リンク先URLのMIME（Multipurpose Internet Mail Extensions）タイプ、つまりメディアタイプを指定するための属性です。リンク先のコンテンツ形式をあらかじめブラウザに伝えることで、より正確なリンク処理が可能になります。

基本構文

<area type="type_of_media">

上記の「type_of_media」には、リンク先ドキュメントの標準的なメディアタイプを指定します。例えば、「image/bmp」「image/tiff」「image/png」などが該当します。

実装例

それでは、<area>要素のtype属性を使った具体的なサンプルコードを見ていきましょう。

サンプルコード

<!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/images/test.png" type="image/png" />
    <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
        href = "/php/index.htm" target = "_blank" download="php" hreflang="en"/>
</map>
</body>
</html>

出力結果

上記のコードをブラウザで表示すると、クリック可能な領域を持つイメージマップが表示されます。

このうち「HTML Tutorial」の領域をクリックすると、PNG形式の画像が表示されます。該当する<area>要素には、メディアタイプとして「image/png」を設定しているためです。

このようにtype属性を活用することで、リンク先ファイルの形式を明示的に示すことができ、ユーザーエージェントがコンテンツを適切に扱うためのヒントとなります。

  1. HTMLのvalue属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのvalue属性は、HTMLドキュメント内で要素の初期値（デフォルト値）を定義するための属性です。この属性は、button、input、meter、li、option、progress、paramといったHTML要素に対して使用できます。value属性はフォームやUIコンポーネントにおいて重要な役割を果たします。例えば、input要素では入力欄にあらかじめ表示されるテキストを指定でき、meter要素やprogress要素では現在の進捗状況を数値で表現できます。構文value属性の基本的な構文は以下のとおりです。<tagname value="text">

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

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