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
インポートする外部スタイルシート
参考:http://www.w3.org/TR/2014/REC-html5-20141028/links.html#linkTypes<link rel="alternate" href="/en/html" hreflang="en" type="text/html">
crossorigin="値"
-
href
属性で指定したファイルが他のドメインに存在する場合、用途によってクロスドメイン通信を行うためのCORS(Cross-Origin Resource Sharing)リクエストの設定をします。anonymous
CORSリクエストに認証フラグ(credentials flag)をセットしない。 use-credentials
CORSリクエストに認証フラグをセットする。
参考:http://www.w3.org/TR/html5/infrastructure.html#cors-settings-attribute<link rel="stylesheet" href="http://example.com/style.css" crossorigin="anonymous">
CORS 設定属性 – HTML | MDN media="適用メディア"
-
href
属性で指定したファイルがどのメディアにあてはまるかについて指定します。値は有効なメディアクエリでなければなりません。
参考:W3C Media Queries<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 640px)">
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">
- グローバル属性
サンプル
<!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>