link要素
link要素はHTMLから他のリソースを参照するリンクを貼ることができます。
link要素はhead要素内か、head要素内に存在するnoscript要素の内側に記述することができます。
必須であるhref属性とrel属性に加え以下の属性が利用できます。
href属性
href属性は他のリソースを参照するURLやファイルのパスを示します。
<link rel="stylesheet" href="../style.css">
rel属性
rel属性は参照するリソースのタイプを指定できます。
<link rel="stylesheet" href="../style.css">
rel属性は以下の値を取ることができます。
alternate | 現在のドキュメントの代替リソースを指定します |
---|---|
author | 現在のドキュメントの記事の筆者を指定します |
help | 現在のドキュメントのヘルプを指定します |
icon | 現在のドキュメントのアイコンを指定します |
license | 著作権情報を指定したページへのリンクを指定します |
next | 一つ後の文書へのリンクを指定します |
prefetch | 先読みするリソースを指定します |
prev | 一つ前の文書へのリンクを指定します |
search | 親ページや関連ページのURLを指定します |
stylesheet | 読み込むスタイルシートを指定します |
HTML5ではa要素やarea要素のrel属性で指定可能な「bookmark」、「nofollow」、「noreferrer」、「tag」はlink要素では指定できないので注意してください。
また、HTML5では定義されていませんが以下のようなrel属性も利用されます。
IEなどを考慮していfavicon(ファビコン)を指定する場合はrel=”icon”ではなく以下のrel=”shortcut icon”を利用します。favicon画象には.ico形式のファイルを指定します。
shortcut icon | faviconの画象URL |
---|
GoogleによりSEOの観点から以下のrel属性の値の利用が推奨されています。
canonical | 類似したページの中で優先されるページを指定する |
---|---|
publisher | 著作権をもつ団体のGoogle+ページのURL |
また、Googleはrel=”author”に著作権者のGoogle+のアカウントページを指定することも推奨しています。
iPhoneやAndroidなどのスマートフォンでは独自の仕様として以下のrel属性でスマートフォンのホームページに登録できるウェブクリップアイコンのURLを指定できます。(Android端末は端末により対応状況が異なります。)
apple-touch-icon | 指定されて画象に角丸と光沢を加えて利用する |
---|---|
apple-touch-icon-precomposed | 指定されて画象そのままウェブクリップアイコンとして利用する |
media属性
media属性は外部リソースを参照するメディアが指定できる属性です。
<link rel="stylesheet" media="print" href="../style.css">
media属性は以下の値をとることができます。
all | すべてのメディア media属性を省略した場合allが指定されます |
---|---|
screen | PCなどのスクリーンメディア |
プリンタなどの印刷メディア | |
aural | 音声を出力するメディア(CSS2未満) |
speech | 音声を出力するメディア(CSS2以上) |
braille | 点字を出力するメディア |
embossed | 点字のページを出力するプリンタなどのメディア |
handheld | モバイル端末などのメディア |
projection | プロジェクターなどのメディア |
tty | テレタイプなどのメディア |
tv | TVなどのメディア |
いくつかのデバイスはこれらのメディアタイプに対応していますが、ほとんどのデバイスは表示にはscreenの記述を、印刷向けにはprintの記述を解釈します。
複数のメディアを指定したい場合はカンマ(,)区切りで指定可能です。
<link rel="stylesheet" media="print,screen" href="../style.css">
HTML5ではこれらのメディア指定に加えて、メディアの特性を指定できるメディア クエリーの指定が追加されています。
hreflang属性
hreflang属性はリソースの言語を指定できます。
<link rel="license" hreflang="en-us" href="http://xxxx.com/license.txt">
type属性
type属性はリソースのMIMEタイプが指定できます。
<link rel="license" type="text/plain" href="http://xxxx.com/license.txt">
sizes属性
外部リソースの画象などのサイズが指定できます。
<link rel="apple-touch-icon" sizes="57x57" href="/license.png" >
参考URL
4.2.4 The link element - W3C
4.12.5 Link types - W3C
Media Queries - W3C
登録日 : 2013年01月27日 最終更新日 : 2014年3月22日