HTML Living Standard/link
link 要素
[編集]<link> 要素は、外部リソースを文書にリンクするために使用されます。特に、外部スタイルシート（CSSファイル）やアイコンファイルなどのリソースを文書と関連付ける際に使用されます。また、<link> 要素は、<head> 要素内に配置されます。
概要
[編集]- カテゴリ: メタデータコンテンツ
- 使用できる文脈:
<head>要素内 - 内容モデル: なし（自己終了タグ）
- タグの省略: 開始タグと終了タグのどちらも省略可能
- 属性:
rel– リソースとの関係を指定href– リソースのURLを指定type– リソースのメディアタイプを指定media– メディアタイプに基づいたリソースの適用条件を指定sizes– リソースのサイズ（アイコンなど）hreflang– リソースの言語を指定
使用例
[編集]外部スタイルシートのリンク
[編集]<link> 要素は、外部スタイルシート（CSSファイル）をリンクするためによく使用されます。以下の例では、style.css というCSSファイルをリンクしています。
<link rel="stylesheet" href="style.css">
rel="stylesheet" は、リンクするリソースがスタイルシートであることを示します。
アイコンの指定
[編集]ウェブページのアイコン（favicon）を指定するためにも <link> 要素が使用されます。以下は、ウェブサイトのアイコンとして favicon.ico を指定する例です。
<link rel="icon" href="favicon.ico" type="image/x-icon">
rel="icon" 属性は、リンクがアイコンを示すことを意味します。
関連リソースのリンク
[編集]<link> 要素は、外部リソースとの関係を指定するためにも使用されます。たとえば、RSSフィードを指定する場合は、以下のように記述します。
<link rel="alternate" type="application/rss+xml" href="feed.xml" title="RSS Feed">
この例では、rel="alternate" を使用して、異なる形式（RSSフィード）のリソースがあることを示しています。
メディア条件に基づくスタイルシートの指定
[編集]<link> 要素は、メディア属性を使用して、異なる条件でスタイルシートを適用することができます。例えば、プリント用のスタイルシートを指定する場合は次のように記述します。
<link rel="stylesheet" href="print.css" media="print">
ここでは、media="print" 属性を使用して、印刷時に適用されるスタイルシートを指定しています。
アクセシビリティの考慮事項
[編集]rel属性は、リンクするリソースとの関係を明示的に指定するために非常に重要です。例えば、スタイルシートのリンクの場合はrel="stylesheet"、アイコンの場合はrel="icon"を指定する必要があります。media属性を使用することで、ユーザーの環境に応じたリソースを適切に選択でき、レスポンシブデザインの実現にも役立ちます。
ベストプラクティス
[編集]- スタイルシートのリンク: 外部CSSファイルをリンクする場合は、
<link rel="stylesheet">を使用し、ページのスタイルを管理しましょう。 - アイコンの設定: ウェブサイトのアイコンを指定するために
rel="icon"を使用し、ユーザーに視覚的なブランド識別を提供します。 - リソースの適切な指定: 他のリソース（RSSフィード、JavaScriptファイル、フォントなど）をリンクする場合は、適切な
rel属性を使用してリソースとの関係を明示的に指定しましょう。 - メディア条件を活用:
media属性を使用して、ユーザーのデバイスや環境に応じたスタイルシートやリソースを適用しましょう。
注意事項
[編集]<link>要素は、<head>要素内で使用されることが一般的です。ページの他の場所で使用すると、意図した通りに機能しない可能性があります。- リソースのURL（
href）が正確であることを確認し、リンク切れや誤ったリソースを避けるようにしましょう。