【HTML Living Standard】link要素の使い方
link要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
linkオブジェクトは、現在のHTMLドキュメントと外部リソースとの関連性を定義するオブジェクトです。これは主に、ウェブページのデザインを制御するスタイルシート（CSS）ファイルを読み込むために使用されます。例えば、<link rel="stylesheet" href="style.css">のように記述することで、外部のCSSファイルを現在のHTMLドキュメントに適用し、ウェブページの見た目を統一的に管理できます。
この要素は通常、HTMLドキュメントの<head>要素内に配置され、ブラウザがページをレンダリングする前に必要な外部リソースを事前に読み込む役割を果たします。スタイルシート以外にも、ウェブサイトのタブやブックマークに表示されるファビコン（サイトアイコン）を指定するためにも利用されます（例: <link rel="icon" href="favicon.ico">）。
link要素の重要な属性には、関連性の種類を指定するrel属性と、外部リソースのURLを指定するhref属性があります。他にも、リソースのMIMEタイプを指定するtype属性や、特定のメディア（画面サイズなど）にのみ適用するかどうかを制御するmedia属性など、用途に応じた様々な属性が存在します。
また、ウェブパフォーマンスの最適化にも貢献し、リソースのプリロード（例: <link rel="preload">）やプリフェッチ（例: <link rel="prefetch">）といった高度な機能を通じて、ユーザーエクスペリエンスの向上にも役立てることができます。このように、linkオブジェクトは、ウェブページの見た目、機能、そしてパフォーマンスを外部ファイルと連携させるための基盤となる、非常に重要なHTML要素です。
構文(syntax)
1<link rel="stylesheet" href="style.css">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML linkタグで外部CSSとファビコンを設定する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>linkタグのサンプル</title> 7 <!-- 外部のスタイルシート(CSSファイル)を読み込み、ウェブページのデザインを適用します --> 8 <link rel="stylesheet" href="styles.css"> 9 <!-- ウェブブラウザのタブなどに表示されるサイトアイコン(ファビコン)を設定します --> 10 <link rel="icon" href="favicon.ico" type="image/x-icon"> 11</head> 12<body> 13 <h1>linkタグの基本的な使用例</h1> 14 <p>このHTMLファイルは、linkタグを使って外部CSSファイル（styles.css）を読み込み、ファビコン（favicon.ico）を設定しています。</p> 15</body> 16</html>
HTMLのlinkタグは、ウェブページと外部リソースとの関係性を定義するために使用される要素です。主にHTML文書の<head>セクション内に記述され、ブラウザには直接表示されません。プログラミング言語の関数のような「引数」や「戻り値」は持ちませんが、代わりに「属性」を用いてその挙動を制御します。
このタグの最も一般的な用途は、外部のCSS（Cascading Style Sheets）ファイルを読み込み、ウェブページのデザインを適用することです。例えば、rel="stylesheet"属性で読み込むリソースがスタイルシートであることを示し、href="styles.css"属性でそのCSSファイルのパスを指定します。これにより、HTMLの構造とCSSのデザインを分離し、ウェブページの保守性や再利用性を高めることが可能です。
また、linkタグはウェブブラウザのタブやブックマークに表示されるサイトアイコン（ファビコン）を設定するためにも利用されます。この場合、rel="icon"属性を設定し、href="favicon.ico"のようにアイコンファイルのパスを指定します。type="image/x-icon"属性は、リソースの形式が画像ファイルであることを明示します。
提示されたサンプルコードでは、link rel="stylesheet" href="styles.css"によって「styles.css」という外部スタイルシートを読み込み、ウェブページのデザインを適用しています。さらに、link rel="icon" href="favicon.ico" type="image/x-icon"によって「favicon.ico」というファビコンを設定し、ブラウザのタブにアイコンが表示されるようにしています。このように、linkタグは外部ファイルとHTML文書を関連付け、ウェブページの機能や見た目を豊かにするために不可欠な要素です。
linkタグは、ウェブページに外部のスタイルシート（CSS）やファビコン（サイトアイコン）などを関連付けるために使用します。このタグは必ずHTML文書の<head>要素内に記述してください。
特に重要なのは、rel属性で関連付けるリソースの種類（例: stylesheet、icon）を正しく指定することと、href属性でそのファイルへの正確なパスを指定することです。ファイルパスが間違っていると、CSSが適用されずデザインが崩れたり、ファビコンが表示されなかったりします。HTMLファイルからの相対パスで指定することが多いため、ファイルの位置関係を正確に把握しましょう。ファビコンを設定する際は、type属性で画像の種類（例: image/x-icon）を明記すると、より確実に表示される傾向があります。
HTML link rel属性で外部リソースを読み込む
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Link要素のサンプル</title> 7 8 <!-- 外部CSSファイルを読み込み、ページのスタイルを定義します。 --> 9 <link rel="stylesheet" href="styles.css"> 10 11 <!-- ウェブサイトのファビコン（ブラウザのタブやブックマークに表示されるアイコン）を設定します。 --> 12 <link rel="icon" href="favicon.ico" type="image/x-icon"> 13 14 <!-- モバイルデバイス（特にApple製品）のホーム画面アイコンを設定します。 --> 15 <link rel="apple-touch-icon" href="apple-touch-icon.png"> 16 17 <!-- 現在の文書の正規URLを指定し、SEOに役立ちます。 --> 18 <link rel="canonical" href="https://example.com/current-page"> 19</head> 20<body> 21 <h1><link>要素の使用例</h1> 22 <p>このページは、<code><link></code>要素がどのように外部リソースを参照し、ページの機能や見た目を向上させるかを示します。</p> 23 <p>上記の<code><head></code>セクションをご覧ください。<code>rel</code>属性が異なる複数の<code><link></code>要素が含まれています。</p> 24</body> 25</html>
HTMLの<link>要素は、現在のHTML文書と外部リソースとの関連付けを定義するために使用されます。この要素は主に<head>セクション内に配置され、ウェブページの見た目や機能に影響を与える様々な外部ファイルを読み込んだり、ブラウザや検索エンジンに重要な情報を伝えたりする役割があります。
<link>要素は、外部のスタイルシート（CSS）を適用してページの見た目を整えたり、ブラウザのタブやブックマークに表示されるファビコンを設定したり、モバイルデバイスのホーム画面アイコンを指定したりする際に用いられます。また、検索エンジン最適化（SEO）のために、ページの正規URLを示す目的でも利用されます。
この要素自体は、プログラミング言語の関数のような「引数」や「戻り値」という概念は持ちません。代わりに、rel属性を使って外部リソースとの関係性（例えば、stylesheetはスタイルシート、iconはファビコン、canonicalは正規URLなど）を指定し、href属性でそのリソースのURL（場所）を指定します。これにより、<link>要素はrel属性が異なることで多様な役割を果たすことができます。
サンプルコードでは、rel="stylesheet"でCSSファイルを読み込み、rel="icon"でファビコンを設定、rel="apple-touch-icon"でAppleデバイス用のアイコンを設定し、rel="canonical"で正規URLを指定する例が示されています。これらはウェブページが外部リソースを効果的に活用し、ユーザー体験やウェブの信頼性を向上させるための重要な設定です。
<link>要素はHTML文書の<head>セクション内に記述し、<body>内には書かないでください。最も重要なrel属性は、リンク先のファイルが現在の文書とどのような関係にあるかを示すため、その値を正しく指定することが必須です。誤ったrelは意図した機能が動作しない原因となります。href属性には、リンクしたいリソースの正確なURLまたはファイルパスを指定してください。パスが間違っていると外部リソースは読み込まれません。異なる目的のリソースを読み込む場合は、それぞれに適切なrel属性を持つ<link>要素を複数記述できます。favicon.icoのように、type属性でリソースのMIMEタイプを明示すると、より確実な動作が期待できます。