link要素[HTML5]

<link>…… リンクする外部リソースを指定する

<link>タグは、リンクする外部リソースを指定する際に使用します。外部リソースとは、例えば、HTMLファイル、CSSファイル、RSSファイルなど、現在の文書ファイルに関連している外部ファイルのことです。<link>タグは、<head>~</head>の中に記述します。

<link>タグを指定する場合には、href属性とref属性が必須です。href属性とref属性が指定されていない場合には、<link>タグの指定は無効となります。href属性には、リンクする外部ファイルのURLを指定します。

rel属性にはリンクタイプを指定します。具体的には、現在のファイルとリンク先の外部ファイルとの関係性を表すキーワードを指定します。リンクタイプには以下の値などがあります。以下の値のうち、よく使用されているのはstylesheetやalternateなどです。現在のところ、それ以外の値は実際にはあまり使用されておらず、Opera以外の一般的なブラウザではサポートされていません。

  • alternate ……代替文書
  • archives ……参考出典・関連書籍
  • author ……作者
  • first ……最初の文書
  • help ……ヘルプ
  • icon ……アイコン
  • index ……索引
  • last ……最後の文書
  • license ……著作権
  • next ……次の文書
  • pingback ……pingbackサーバのアドレス
  • prefetch ……先読みする文書
  • prev ……前の文書
  • search ……検索
  • stylesheet ……スタイルシート
  • sidebar ……ブラウザのサイドバー
  • tag ……文書に適用されるタグ
  • up ……上の階層へのリンク

link要素には、href属性とref属性以外の属性として、title属性(外部リソースのタイトル)、hreflang属性(外部リソースの言語)、media属性(外部リソースの対象メディア)、が用意されています。HTML文書以外の外部ファイルを指定する際には、type属性やmedia属性を指定します。

<link>タグは一つの文書内に複数記述することができます。例えば、rel=”stylesheet”を指定された複数の<link>タグで、複数の外部CSSファイルを指定することも可能です。この場合、リンクしている複数の外部CSSファイルのスタイル指定がすべて有効となります。スタイル指定が競合した場合には、より後から読み込まれたCSSファイルのスタイル指定が優先されます。

■HTML4.01からHTML5へのバージョンアップによる変更点

link要素は、HTML4.01からHTML5へのバージョンアップで大きな変更はありません。

■html5での使用例

<!DOCTYPE html>
<html>
<head>
<title>link要素の使用例</title>
<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="green.css" title="Green styles">
<link rel="alternate stylesheet" href="contrast.css" title="High contrast">
<link rel="alternate stylesheet" href="big.css" title="Big fonts">
<link rel="alternate stylesheet" href="wide.css" title="Wide screen">
</head>
<body>
<p>link要素の使用例です。</p>
</body>
</html>
カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート   パーマリンク

コメントを残す

メールアドレスが公開されることはありません。