HTML5 Logo

link要素


link

link要素は、関連する別の文章やファイルなどを示すための空要素です。
head要素 内で指定し、href属性とrel属性は必ず指定する必要があり、色々な目的で利用します。

カテゴリー

メタデータコンテンツ
body 内で利用可能な場合: フローコンテンツ、フレージングコンテンツ

link属性

href 文書のURLを指定。
crossorigin CORS(Cross-Origin Resource Sharing)で使用される属性で、他のサイトのリソースにアクセスする際に、認証情報を使用するかどうかを指定します。
rel この文書から見た、参照先の文書との関係。
stylesheet、alternate、dns-prefetch、icon、next、pingback、preconnect、prefetch、preload、prerender、search、serviceworker
media 文書の出力先を指定します。
screen(画面出力用), print(印刷用), all(全て)
nonce CSP(Content Security Policy)チェックで用いられるワンタイムトークンを指定します。
クロスサイトスクリプティング(XSS)の対策として、HTTPレスポンスヘッダに、Content-Security-Policyに設定したnonce属性と同じものでない場合、実行されなくすることができます。
hreflang 参照先の文書の言語を指定します。
type 文書のタイプを指定します。
text/html や text/css などの MIME タイプを指定します。
referrerpolicy リソースにアクセスした際のリファラー(Referer)送信ポリシーを指定します。
no-referrer、no-referrer-when-downgrade、same-origin、origin、strict-origin、origin-when-cross-origin、strict-origin-when-cross-origin、unsafe-url
sizes rel=”icon” の際のアイコンサイズを指定します。

link使用例

link要素(stylesheetを指定する例)
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>TOP | tech.pjin.jp</title>
		<link rel="stylesheet" href="default.css">
	</head>
	<body>
		<p>default.cssはこのファイルと同階層にあることになります。</p>
		<p>変更したい場合は、相対パス又は絶対パスで指定します。</p>
	</body>
</html>
link要素(アイコンを指定する例)
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>MENU | TECH PJIN</title>
		<link rel="icon" href="favicon.png" sizes="16x16" type="image/png">
	</head>
	<body>
		<p>faviconを指定する例です。</p>
	</body>
</html>
  • このエントリーをはてなブックマークに追加

PAGE TOP