<a>, <area>, <link> 要素を使用してリンクを作成するときに、現在のページとリンク先の関係を示します。
rel 属性の値としてリンク種別を書きます。
<a href="https://sample.com" rel="リンク種別">リンク</a>
目次
使用できるリンク種別一覧
alternate
同じ内容の HTML 文書が存在するときに、それらを区別するために使用します。
例えば
- スマートフォン向けのページ（media 属性を使用）
- 別の言語のページ（hreflang 属性を使用）
- 代替スタイルシート（<link> タグを使用）
に使用します。
HTML の作者についてのページへのリンクを定義します。
bookmark
一番近い祖先の<article>要素へのリンク、または一番関連があるセクションへのリンクを意味します。
canonical
内容が似ている HTML 文書があるときに、検索エンジンが重複コンテンツと評価しないようにします。
external
現在のサイトではなく、外部のサイトへのリンクであることを示します。
help
詳細なヘルプページへのリンクであることを示します。
icon
ブラウザのタブやブックマークに表示されるアイコンを指定します。
license
著作権・ライセンス情報のページへのリンクを示します。
manifest
指定したリンクがウェブアプリマニフェスト（名前・作者・アイコンなどの情報）であることを示します。
modulepreload
モジュールスクリプトの読み込みを優先させます。
next
現在のページの、一つ後のリンクであることを示します。
nofollow
リンク元のページの作者にとって「重要でない」「お勧めできない」リンクであることを示します。
noopener
リンクを新しいコンテキスト（タブ・ウィンドウ）で開き、もとの HTML 文書にアクセスしないようにすることを指示します。
noreferrer
リンク先へ移動する時に、リファラとして情報を送信しないようにします。
pingback
pingback のアドレスを指定するときに使用します。
prefetch
リンク先のリソースを事前に読み込むようにブラウザに提案します。
preload
リソースをダウンロードしておくことをブラウザに指示します。
prev
現在のページの、一つ前のリンクであることを示します。
search
リンクがサイト内検索をするための文書であることを示します。
shortlink
短縮リンクであることを示します。
stylesheet
CSS スタイルシートであることを示します。
tag
現在の文書に関するタグのページであることを示します。
非推奨・廃止・試行段階のリンク種別
- archives
- dns-prefetch
- first
- import
- index
- last
- preconnect
- prerender
- sidebar
- up
<a>, <area>, <link> への使用可・不可一覧
| <a> | <area> | <link> | |
|---|---|---|---|
| alternate | ○ | ○ | ○ |
| author | ○ | ○ | ○ |
| bookmark | ○ | ○ | × |
| canonical | – | – | ○ |
| external | ○ | ○ | × |
| help | ○ | ○ | ○ |
| icon | × | × | ○ |
| license | ○ | ○ | ○ |
| manifest | × | × | ○ |
| modulepreload | × | × | ○ |
| next | ○ | ○ | ○ |
| nofollow | ○ | ○ | × |
| noopener | ○ | ○ | × |
| noreferrer | ○ | ○ | × |
| pingback | × | × | ○ |
| prefetch | – | – | ○ |
| preload | × | × | ○ |
| prev | ○ | ○ | ○ |
| search | ○ | ○ | ○ |
| shortlink | × | × | ○ |
| stylesheet | × | × | ○ |
| tag | ○ | ○ | × |
○：使用可 ×：使用不可 -：不明・未実装
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。
オンラインスクールを選ぶときのポイント
- 無料体験があること
- 個別サポートがあること
自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。（無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。）
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。
ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい🙂
1. TechAcademy（テックアカデミー）
オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。
2. CodeCamp（コードキャンプ）
一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。
3. Treehouse
英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。
