プログラミング

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

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

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

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

aタグの書き方

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

<a 属性=”値”></a>

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

<a href=”https://kubogen.com/”>KUBOGEN</a>

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

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

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

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

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

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

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

<a href=”https://kubogen.com/”><img src=”画像URL”></a>

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

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

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

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

href(ハイパーリファレンス)

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

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

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

target(ターゲット)

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

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

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

属性値 意味
_blank リンク先を新しいウィンドウ(タブ)で表示
_parent 1つ上位のブラウジングコンテキストで表示
_self 現在のブラウジングコンテキストで表示
_top 最上位のブラウジングコンテキストで表示

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

以下、使用例です。

<a href=”https://kubogen.com/” target=”_blank”>新規ウィンドウでKUBOGENを表示します。</a>

rel(リレーション)

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

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

属性値 意味
alternate 別の言語や別フォーマット版などの代替文書
author 著者情報
bookmark 文書の固定リンク
help ヘルプへのリンク
icon アイコンをインポート
license ライセンス文書
next 連続している文書の次の文書
prev 連続している文書の前の文書
nofollow 重要ではないリンク
noreferrer ユーザがリンクを移動する際にリファラを送信しない
prefetch リンク先のリソースをあらかじめキャッシュするように指定
search 検索機能
tag 文書に指定されたタグのページ

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

以下、使用例です。

<a href=”” rel=”nofollow”>◯◯にはリンクの効果を渡しません</a>

media(メディア)

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

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

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

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

属性値 意味
all すべてのデバイス
aural 音声合成装置
braille 点字用ディスプレイ
embossed 点字用プリンタ
print プリンタ
handheld モバイルデバイス
projection プロジェクター
screen ディスプレイ
tty 文字幅が固定のデバイス
tv テレビ

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

hreflang(ハイパーリファレンスランゲージ)

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

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

言語
ja 日本語
en 英語
eu-au オーストラリアにおける英語
de ドイツ語
<a href=”リンク先URL” hreflang=”en”>英語で書かれているページです。</a>

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

type(タイプ)

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

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

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

MIMEタイプ ファイル形式
text/plain プレーンテキスト
text/html HTMLファイル
text/css CSSファイル
text/javascript JavaScriptファイル
img/jpeg Jpegファイル
img/png PNGファイル
img/gif GIFファイル
video/mp4 MP4ファイル
video/ogg Oggファイル
audio/mp3 MP3ファイル
audio/mp4 MP4ファイル
audio/wav WAVEファイル
audio/aac AACファイル
application/shockwave-flash Flashファイル
application/pdf PDFファイル

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

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

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

<h2 id=”a-kakikata”>aタグの書き方</h2>

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

<a href=”#a-kakikata”>aタグの書き方</a>

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

aタグについてのまとめ

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

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

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

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

2 Comments

Leave a Comment