【HTML】linkタグ - 外部リソースとの関係

HTMLのlinkタグについて解説します。

検証環境

HTML

macOS

14.1

linkタグ

linkタグは“外部リソースの関連性”を意味するタグです。

この要素で関連性を示したファイル等は読み込まれ、一般的にスタイルシートやサイトアイコン、サードパーティファイルの読み込みに使用します。

基本構文

<link rel="関連性" href="URL">

属性

主な属性は次の通りです。

属性名	必須	内容
rel	-	関連性
href	-	外部リソースURL

サンプル

スタイルシート

次のスタイルシートをlinkで読み込むサンプルです。

html-link-tag.css

@charset "utf-8";
h1 { color: red; }

sample.html

___ih_hl_start
<link rel="stylesheet" href="/article/style/html-link-tag.css">
___ih_hl_end

<h1 id="title">HTML</h1>
<p>HTMLの正式名称はHyperText Markup Languageです。</p>

プレビュー

サイトアイコン

サイトアイコン（ファビコン）を設定するサンプルです。

サイトアイコンはWebブラウザ等のタブに表示されるため、このサンプルにプレビューはありません。

sample.html

___ih_hl_start
<link rel="icon" type="image/x-icon" href="/favicon.png">
___ih_hl_end