カスタム検索

<link>タグ

<link>タグの機能と属性
機能 他の文書との関係を定義
属性 HTML-4.01 コア 言語 イベント  charset  href  hreflang  type  rel  rev  media  
XHTML-1.0 コア 言語 イベント  charset  href  hreflang  type  rel  rev  media  
備考 空要素

<link>タグは他のファイルとの関係を定義します。CSSファイルの指定に最もよく使用されます。CSSファイルの指定以外の用途で使用されることはあまりないと思います。

charset属性

charset属性は他のファイル(リンク先の文書)で使用されている文字セットを指定します。値にはShift_JISや、EUC-JP等を指定します。

href属性

href属性には対象となるファイルへのパスを指定します。このhref属性で指定されたファイルは<link>タグを記述したそのもののファイルと関係があるということを示します。<link>タグの性質上、このhref属性は必須となります。

hreflang属性

hreflang属性は対象となるファイルで使用されている言語を指定します。日本語であればjpを指定します。

type属性

type属性は対象となるファイルのMIMEタイプ(ファイルの形式)を指定します。CSSファイルであれば、text/cssを指定します。

rel属性、rev属性

rel属性とrev属性は対象となるファイルとの関係を指定します。rel属性は対象となるファイルへの関係で、rev属性は対象となるファイルからの関係を指定します。値としてよく使用されるものに、next(次へ)、prev(前へ)があります。

link.html
<html>
    <head>
        <link href="hoge.html" rel="next" rev="prev" />
        <title>&lt;link&gt;タグの使用例</title>
    </head>
    <body>
        <p>本文
        </p>
    </body>
</html>

この例の場合、入力例の文書そのものはhoge.htmlに「次へ進む」関係であり、hoge.htmlから「戻る」関係にあります。

media属性

media属性はパソコン以外のメディア(携帯電話やPDA等)で文書を最適な方法で表示させるために使用します。しかし、他のメディアでの表示に関してはCSSで適切な方法があるので、ここでの説明は省略します。

CSSを使用する際の使用例

<link>タグは主にCSSファイルを読み込む際に使用されることが多いのでその入力例を紹介します。CSSについての詳細はCSSを参照してください。

link2.html
<html>
    <head>
        <link href="page_styles.css" rel="stylesheet" type="text/css" />
        <title>&lt;link&gt;タグの使用例</title>
    </head>
    <body>
        <p>本文
        </p>
    </body>
</html>

この例の場合、href属性でCSSファイルへのパスを指定し、rel属性で対象となるファイルとの関係、すなわち、対象となるファイルがstylesheet(スタイルシート)であることを指定します。type属性でCSSファイルのファイル形式であるtext/cssを指定しています。

CopyLeft 2017 Webデザインレッスン プライバシーポリシー サイト管理者に連絡