HTML/jp/Elements/link
From W3C Wiki
< HTML | jp/Elements
Contents |
<link>
<link>要素によって、Webサイト制作者はドキュメントから別のリソースにリンクすることができます。
ポイント
- <link>要素はrel属性を指定しなければなりません。
コンテンツ属性
href= URL
リンクするリソースのURLを指定します。
rel= トークン
ドキュメントとリンク先の関係性を表すトークンを指定します。トークンは、ハイパーリンクと外部リソースの2つのカテゴリーに分けられます。
| リンクの種類 | カテゴリー | 概要 |
|---|---|---|
| alternate | ハイパーリンク | Gives alternate representations of the current document |
| archives | ハイパーリンク | Provides a link to a collection of records, documents, or other materials of historical interest |
| author | ハイパーリンク | Gives a link to the current document's author. |
| first | ハイパーリンク | Indicates that the current document is a part of a series, and that the first document in the series is the referenced document. |
| help | ハイパーリンク | Provides a link to context-sensitive help. |
| icon | 外部リソース | Imports an icon to represent the current document. |
| index | ハイパーリンク | Gives a link to the document that provides a table of contents or index listing the current document. |
| last | ハイパーリンク | Indicates that the current document is a part of a series, and that the last document in the series is the referenced document. |
| license | ハイパーリンク | Indicates that the main content of the current document is covered by the copyright license described by the referenced document. |
| next | ハイパーリンク | Indicates that the current document is a part of a series, and that the next document in the series is the referenced document. |
| pingback | 外部リソース | Gives the address of the pingback server that handles pingbacks to the current document. |
| prefetch | 外部リソース | Specifies that the target resource should be preemptively cached. |
| prev | ハイパーリンク | Indicates that the current document is a part of a series, and that the previous document in the series is the referenced document. |
| search | ハイパーリンク | Gives a link to a resource that can be used to search through the current document and its related pages. |
| stylesheet | 外部リソース | Imports a stylesheet. |
| sidebar | ハイパーリンク | Specifies that the referenced document, if retrieved, is intended to be shown in the browser's sidebar (if it has one). |
| tag | ハイパーリンク | Gives a tag (identified by the given address) that applies to the current document. |
| up | ハイパーリンク | Provides a link to a document giving the context for the current document. |
media= media-query list
The media for which the destination of the hyperlink was designed.
If the link is a hyperlink then the media attribute is purely advisory, and describes for which media the document in question was designed.
However, if the link is an external resource link, then the media attribute is prescriptive. The user agent must apply the external resource when the media attribute's value matches the environment and the other relevant conditions apply, and must not apply it otherwise.
The default, if the media attribute is omitted, is "all", meaning that by default links apply to all media.
-
hreflang= language tag
The language of the destination of the hyperlink.
A valid language tag, as defined in [BCP47].
type= A valid MIME type that destination of the hyperlink.
gives the MIME type of the linked resource.
The default value for the type attribute, which is used if the attribute is absent, is "text/css".
sizes= icon sizes
The sizes attribute is used with the icon link type. The attribute must not be specified on link elements that do not have a rel attribute that specifies the icon keyword.
- Also, the title attribute has special semantics on this element. The exception is for style sheet links, where the title attribute defines alternative style sheet sets.
グローバル属性も参照してください。
例題
例題 A
ここでは、<link>要素によって複数のスタイルシートを関連づけています。
<head> <!-- a persistent style sheet --> <link rel="stylesheet" href="default.css"> <!-- the preferred alternate style sheet --> <link rel="stylesheet" href="green.css" title="Green styles"> <!-- some alternate style sheets --> <link rel="alternate stylesheet" href="contrast.css" title="High contrast"> <link rel="alternate stylesheet" href="big.css" title="Big fonts"> <link rel="alternate stylesheet" href="wide.css" title="Wide screen"> </head>
例題 B
以下の例は、代替フォーマットを使用するページや、他言語を対象にしたページ、他のメディアを対象としたページを指定する方法を示しています。
<head> <link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML"> <link rel=alternate href="/fr/html" hreflang=fr type=text/html title="French HTML"> <link rel=alternate href="/en/html/print" hreflang=en type=text/html media=print title="English HTML (for printing)"> <link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)"> <link rel=alternate href="/en/pdf" hreflang=en type=application/pdf title="English PDF"> <link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF"> </head>
HTML仕様書
<link>要素は、HTML5仕様書の4.2.5 The link elementに定義されています。
