リンクを貼るためのaタグ（アンカータグ）について【HTML】

HTMLでリンクを貼る場合にはaタグ（アンカータグやリンクタグともいう）を使用します。

リンクというのは、今見ているページから他のサイトやページに誘導するために設定するもので、自サイト内で関連のあるページを見てもらいたいときや、参考にした外部サイトのURLを載せたりするときなど、よく使う基本的なタグなのでしっかり覚えておきましょう。

また、自サイトの別ページへのリンクを内部リンクといい、他の外部サイトへのリンクを外部リンクといいます。

aタグの書き方

aタグの書き方ですが、以下のように書きます。

aタグで使用できる属性や属性値については後述しますが、リンクを貼るために使われるのはhref属性。

例えば、「KUBOGEN」というテキストに対して、「https://kubogen.com/」というトップページのURLのリンクを設定したいときはこうなります。

このようにhref属性を指定した場合はリンクを表し、リンクが設定された「KUBOGEN」というテキストのことをアンカーテキストといいます。

アンカーテキストはSEO的にもとても重要なので、リンク先がどういうページなのかを表す文言にしましょう。

もしhref属性を指定していない場合は、リンク先が存在しないということなので、ダミーリンクを表します。

画像にもリンクを設定できる

リンクを設定できるのはテキストだけではありません。

画像にも設定することができます。

画像にaタグを使う場合、アンカーテキストの代わりに<img src=”画像URL”>を入れるだけで、テキストのときと書き方自体はそれほど変わりません。

aタグで使用できる属性と値

aタグではhref属性以外にも使える属性がいくつかあります。

href属性も含め、aタグで使用できる属性とその値についてご説明します。

href（ハイパーリファレンス）

まずは最初に紹介したhref属性。値としてリンク先のURLを設定します。

もしこのhref属性を省略するのであれば、後述するtarget・rel・media・hreflangという属性も省略します。

なぜならこれらの属性はリンク先の場所だったり情報についての属性なので、href属性ありきだからです。

target（ターゲット）

target属性はリンクの表示先を指定できる属性です。

たとえば、リンク先のページを新しいウィンドウで表示させたいときやiframe要素を対象リンクとして展開したいときなんかに使います。

以下のような値を指定できます。

関連記事
ブラウジングコンテキストとはWebページを表示する環境のこと

以下、使用例です。

rel（リレーション）

rel属性はリンク先のソースの位置づけを表します。

以下のような値を指定でき、半角スペースで区切ることで複数の値を指定することも可能です。

特に、リンク先のページにリンクの効果を送りたくないときにはnofollowを指定することがあったりします。

以下、使用例です。

media（メディア）

media属性はリンク先の文書や読み込む外部リソースが、どのメディアに適用するのかを指定する属性です。

属性の値はメディア・クエリである必要があります。

メディア・クエリというのは、デバイス別にCSSを分けたりするときに使う技術のこと。

メディアには以下のようなものがあります。

media属性を省略するとallとして扱われるので、デバイスを指定する必要がなければ、特に書かなくてもよさそうです。

hreflang（ハイパーリファレンスランゲージ）

hreflang属性は、リンク先ページのどのような言語で記述されているかを表します。

そのため値には言語を指定するものを入れるのですが、たとえば以下のようなものがあります。

リンク先のページが英語で書かれているということを表しています。

type（タイプ）

type属性はリンク先のMIMEタイプを指定する属性です。

MIMEタイプというのは、テキストや画像、動画、音声データなどのファイル形式を示す識別子のこと。

たとえば以下のようなものがあります。

ページ内の指定した場所へのリンクも設定できる

aタグではリンク先として、サイトやページのURLだけでなく、ページ内のある場所にもリンクを指定することができます。

どういうことかというと、たとえば記事の最初の方にある「aタグの書き方」という見出しに「a-kakikata」というid名をつけておきます。

そして、リンク先として「a-kakikata」を指定するんです。CSSでidにスタイルを適用するときと同様、id名に接頭辞ハッシュマーク（#）をつけて指定します。

このように指定することで、「aタグの書き方」の部分を指定できるんです。下記リンクをクリックして試してみてください。
aタグの書き方

aタグについてのまとめ

aタグの使い方や属性・値について紹介しました。

内部リンクや外部リンクを有効に使うことで、ユーザーに色々なページを見てもらい、より多くの情報を届けることができます。

また、世界中のサイトやページを巡回してるクローラーはリンクを飛び回っているので、SEO（検索エンジンの最適化）においてもサイトを評価してもらうために必要な施策のひとつです。

外部リンクに関しては、そのサイトがなくなったりURLが変わってしまうとリンク先がエラーになるので、特に一定数アクセスがあるページは定期的にリンク切れがないか確認しましょう。