HTML5 › HTML5 タグリファレンス ›

link

<link>要素は、文書を他のリソース（ファイル）と関連付けるために使用します。関連する書類のURLは、href属性に空ではない有効なURLで指定する必要があります。関係性を示すrel属性は必須です。

カテゴリ
メタデータ・コンテンツ
配置場所
メタデータ・コンテンツが配置可能な場所。<head>要素内の<noscript>要素の中。
内容
なし（空要素）
属性
href="URL"
外部ファイルのURLを指定します。 
<link rel="stylesheet" href="./style.css">
rel="リンクタイプ"
外部ファイルとの関係性（リンクタイプ）をキーワードで指定します。複数指定する場合はスペースで区切って指定します。指定したキーワードがいずれも仕様で定義されていないものであればこの要素は意味を持ちません。以下はよく使用されるキーワードの一部です。
alternate他言語など現在の文書の代替
icon現在の文書を表すアイコン
next現在の文書がシリーズの一部であるとして次の文書
prev現在の文書がシリーズの一部であるとして前の文書
stylesheetインポートする外部スタイルシート
<link rel="alternate" href="/en/html" hreflang="en" type="text/html">
参考：http://www.w3.org/TR/2014/REC-html5-20141028/links.html#linkTypes
crossorigin="値"
href属性で指定したファイルが他のドメインに存在する場合、用途によってクロスドメイン通信を行うためのCORS（Cross-Origin Resource Sharing）リクエストの設定をします。
anonymousCORSリクエストに認証フラグ（credentials flag）をセットしない。
use-credentialsCORSリクエストに認証フラグをセットする。
<link rel="stylesheet" href="http://example.com/style.css" crossorigin="anonymous">
参考：http://www.w3.org/TR/html5/infrastructure.html#cors-settings-attribute
　　　CORS 設定属性 – HTML | MDN
media="適用メディア"
href属性で指定したファイルがどのメディアにあてはまるかについて指定します。値は有効なメディアクエリでなければなりません。 
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 640px)">
参考：W3C Media Queries
hreflang="言語コード"
href属性で指定したファイルの言語を言語コードで指定します。 
<link rel="alternate" href="/en/html" hreflang="en" type="text/html">
type="MIMEタイプ"
href属性で指定したファイルのMIMEタイプを指定します。 
<link rel="stylesheet" href="style.css" type="text/css">
sizes="アイコンサイズ" HTML5で追加
rel属性がiconの要素でサイズ（ピクセル）を指定します。キーワード「any」、またはアイコンのサイズを所定の書式（整数で幅x高さ、複数指定はスペース区切り）で指定します。 
<link rel="icon" href="favicon.png" sizes="16x16" type="image/png">
<link rel="icon" href="windows.ico" sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel="icon" href="mac.icns" sizes="128x128 512x512 8192x8192 32768x32768">
<link rel="icon" href="iphone.png" sizes="57x57" type="image/png">
<link rel="icon" href="gnome.svg" sizes="any" type="image/svg+xml">
グローバル属性
accesskey, class, contenteditable, data-*, dir, hidden, id, lang, spellcheck, style, tabindex, title, translate

サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5 › link</title>
<link rel="icon" href="favicon.png" sizes="16x16" type="image/png">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>HTML5 › link</h1>
<p>
これはHTML5のlink要素のサンプルです。
</p>
</body>
</html>
関連する記事