Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

<link>

『<link>』タグは外部リソース（CSSファイル・faviconなど）とHTMLドキュメントを紐付けるタグです。『<head>』内に記述し、終了タグは不要な空要素です。

構文

<!-- CSSファイルの読み込み -->
<link rel="stylesheet" href="style.css">

<!-- faviconの指定 -->
<link rel="icon" href="favicon.ico" type="image/x-icon">

<!-- 印刷用CSSの読み込み -->
<link rel="stylesheet" href="print.css" media="print">

<!-- 先読み（プリロード） -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

属性一覧

属性	概要
rel	リンク先リソースとの関係を指定します。最も重要な属性で、必須です。
href	リンク先リソースのURLを指定します。
type	リソースのMIMEタイプを指定します。省略可能な場合がほとんどです。
media	リソースを適用するメディアを指定します。『screen』『print』などを指定します。
crossorigin	クロスオリジンリソースの取得方法を指定します。フォントのプリロード時などに使用します。
as	プリロード（rel="preload"）時にリソースの種類を指定します。

relの主な値一覧

rel値	概要
stylesheet	外部CSSファイルを読み込みます。最もよく使用される値です。
icon	ブラウザのタブに表示されるfaviconを指定します。
canonical	重複ページが存在する場合に正規URLを検索エンジンに伝えます。
preload	ページ表示に必要なリソースをあらかじめ読み込んでおきます。
alternate	別言語版・印刷版などの代替ページを指定します。

サンプルコード

<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>

  <!-- CSSファイルの読み込み（最もよく使います） -->
  <link rel="stylesheet" href="css/style.css">

  <!-- faviconの指定 -->
  <link rel="icon" href="favicon.ico">

  <!-- スマートフォン用のアイコン -->
  <link rel="apple-touch-icon" href="apple-touch-icon.png">

  <!-- 正規URLの指定 -->
  <link rel="canonical" href="https://example.com/page/">
</head>