【HTML】aタグ（リンク）とは？基本的な属性や種類、使い方を解説

WEBページにハイパーリンクを設置する際に利用するaタグは、HTMLタグの基本です。

aタグを使い、ボタンやバナー、テキストなどにハイパーリンクを設置できることは、既にご存知だと思いますが、実はそれ以外にも使い道があります。

このページでは、aタグとは何か基本的な説明から、属性や使い道、使用上の注意点について解説します。

SEO効果も期待できるaタグについて詳しく理解し、正しく設定しましょう。

aタグとは

aタグとは、HTMLの基本的なタグの1つで、ハイパーリンクを設置するために使用されます。

aタグを設置したテキストや画像をユーザーがクリックすると、aタグ内に指定したURLへ移動します。しかし、aタグには上記のような別ページへのリンクだけでなく様々な用途があり、いくつかの属性を与えることもできます。

まずは、aタグの基本的な書き方からご紹介します。

aタグの基本的な書き方

aタグの基本的な書き方は、「開始タグ（<a>）」と「終了タグ（</a>）」で任意のテキストや要素を囲みます。

基本的な形は以下となります。

<a href="リンクさせたいページや場所">テキストや画像</a>

「リンクさせたいページや場所」にURLや同じページ内のリンク先を記述し、「テキストや画像」にユーザーがクリックすると移動する文字列（テキスト）や画像を挿入します。

上記をご覧になると「href」という文字列がありますが、これは何を意味するのか、aタグの属性について解説します。

aタグの属性について

aタグには、hrefなどの「属性」を付与させることができます。その属性とは何なのか、各種類をご紹介しながら解説します。

ハイパーリンク先のURLを指定するhref属性

href属性とは、リンク先のウェブページのURLを指定するもので、aタグを使用する際に不可欠な要素です。

href属性にページのURLを挿入する際は、絶対URLまたは相対URLのどちらも使用可能です。

絶対パスとは、リンク先の完全なアドレスを表し、相対パスは現在のページから同じWebサイト内のリンク先ページの位置を指定するものです。

「<a href="https://www.aaa.com/bbb/">BBBを詳しく見る</a>」という同じWebサイト内にあるページへのリンクを貼る場合を例にしてみましょう。

この場合、「https://www.aaa.com/bbb/」が絶対URL、相対URLで記述するなら「../bbb/」となります。href属性なしでは、aタグを設置しても「リンク先」がない状態になるので、記載漏れがなく、またURLも間違いないよう記述しましょう。

リンク先との関係性を示すrel属性

rel属性は、リンク先のページとの関係性を検索エンジンに伝えるためのものです。属性値には以下のような例が挙げられます。

例えば、「rel=nofollow」と記述すると、検索エンジンに対して、リンク先へ検索エンジンのクローラーが回らないよう指示し、自社サイトとの関係がないことを伝え、リンクジュースの譲渡も発生しません。

他にも、「rel=noopener(リンク先を別タブで開く)」などいくつかの値があり、それぞれ異なる意味を持ちます。rel属性を適切に使用すれば、よりSEO効果も期待できます。 rel属性を使ってリンク先との関係性を検索エンジンに明確に伝えることは、検索をかけたユーザーにより正しい検索結果を伝えることのお手伝いにもなります。

リンクジュースについては別ページで詳しく解説しています。以下のページをご参照ください。

リンク先の表示方法を指定するtarget属性

target属性とは、リンク先のWebページを開く際、同じウィンドウやタブか新しいもので開くかを指示するものです。以下、使用例をご紹介します。

「target_blank」と記述すると、リンク先ページを新しいウィンドウやタブで開き、「target_self」だとクリックした時点で開いているウインドウやタブでリンク先ページを開きます。 別のウインドウやタブでリンク先ページを開くことで、ユーザーはリンク発信元のページ情報と並べて比較などができるため、ユーザビリティの向上につながりますい。

リンク先の文字コードを指定するcharset属性

charset属性は、リンク先ページの文字コードを指定するための属性です。

ブラウザで表示されるHTML5では、charset属性の使用を推奨していないものの、旧式のHTML文書などでは使用されていることがあります。 charset属性を使用すると、ブラウザはリンク先の文字コードを予め知ることができ、ページの読み込み時間を短縮できます。

一方で、適切な文字コードを指定しておかないと、ページが正しく表示されない可能性（いわゆる文字化け）があります。 charset属性を使用するときは、リンク先ページのHTMLソースを調べ、文字コードを合致させなければなりません。

なお、現在HTML5ではUTF-8を推奨しており、その他は非推奨となるため記述する必要がありません。

リンク先のファイルタイプを指定するtype属性

type属性を設定しておくと、aタグからのリンク先にある「メディア」がどのような種類かブラウザに伝えることができます。

例えば、「type="document/pdf"」なら、リンク先がPDFファイルであることを明示します。この情報から、ブラウザはリンクをクリックした際の適切な動作を予測できます。 type属性の指定は必須ではありませんが、リンク先のファイルが特殊な形式である場合や、ブラウザが自動的に判断できない場合に有効です。

aタグを使用する際に一緒に指定する「属性」が何かをお伝えしたところで、次にaタグの使用方法について解説します。

aタグの使い方

aタグの書き方および属性をご理解いただいたところで、実際にaタグはどのような状況で使うものなのか、以下、ご紹介します。

他のページやサイトへのリンク

1つ目のaタグの使い方が、他のWebサイトやページへのリンクです。

aタグを設置することで、自社サイト内にある他のページへのリンクだけでなく、外部サイトへのリンクも可能です。

これまでaタグを使い、自社サイト内の内部リンクや外部サイトへのリンクを設置したものの、属性を与えていない場合は、先にご紹介したものの中から適切なもの設置しておきましょう。

同一ページ内での指定した他の箇所へのリンク

2つ目は、同一ページ内での指定した他の箇所へのリンクです。

同じページ内に記述した内容を、他の部分の説明の補足に使う場合、リンクさせたい部分にid属性を与え、aタグを設置することでユーザーを移動させられます。

同一ページ内のリンクは、ページ内に記述した情報をユーザーが探す手間を省くことからユーザーエクスペリエンスの向上につながります。

例えば、ページ内で指定した見出しへリンクを貼る際には以下のように記述します。

<h2 id="abc">この見出しにリンクさせる</h2>

<a href="#abc">指定した見出しへリンク</a>

指定メールアドレスが入力されたメールソフトを開く

3つ目は、指定メールアドレスが入力されたメールソフトを開くためのリンクです。

href属性に「mailto:」を加え、その後にメールアドレスを記述します。すると、リンク要素をクリックしたユーザーのパソコン上に宛先が自動入力されたメールソフトが開きます。さらに、subjectパラメータを追加することで、メールの件名まであらかじめ設定できます。

<a href="mailto:info@aaa.co.jp?subject=お問い合わせ">お問合せはこちらをクリック</a>

上記はWebページ上だと「お問合せはこちらをクリック」というアンカーテキストにリンクが貼られており、ユーザーは手間なく自社サイトへお問い合わせのメールを送ることができます。

クリックすると電話がかかるリンク

4つ目は、電話をかけるためのリンクです。

自社サイトへアクセスし、商品やサービスに強く興味を持ってくれたユーザーの中には、今すぐ詳しい話を聞いてみたいとお電話を希望される方もいます。

このような確度の高いユーザー向けに、指定電話番号に繋がるリンクを設定しておけば、コンバージョン率を高められます。電話につながるaタグの書き方は以下となります

<a href="tel:0123456789">お電話をご希望の方はこちらをクリック</a>

属性にhref属性を「tel」とし、その後にコロン「：」と電話番号を記述します。スマホで情報検索をするユーザーにとって非常に便利な機能です。

資料などをダウンロードしてもらうリンク

5つ目は、資料などのダウンロードができるリンクです。

自社商材のパンフレットなどをユーザーにダウンロードしてもらいたい場合に使えます。

<a href="/資料ファイルの保存先/">弊社商材のパンフレットをダウンロードする</a>

上記を設定しておくと、ユーザーはクリックするだけで資料ファイルを開くことができます。さらにdownload属性を付与すると、自動的にダウンロードさせることも可能です。

ただし、自動ダウンロードを設置する場合は、前提として資料ファイルそのものが安全であることを明示し、自社サイトの信頼性を保つようにしましょう。

以上、非常に便利なaタグの使い方を解説しました。最後に、aタグを使用する上での注意点に触れておきます。

aタグを使用時の注意点

他のページへのリンクだけでなく、様々な用途に使用できるaタグですが、設定時に注意しなければならないポイントがあります。

絶対パスと相対パスの使い分け

aタグを使用する際の注意点、1つ目は、絶対パスと相対パスの使い分けです。

絶対パスはURL全体を指定する方法で、どのページからでも同じ場所を指定するため、同一Webサイト内へのリンクだけでなく、外部サイトへのリンクにも使えます。

一方、相対パスは「現在のページからサーバー内の相対的な位置」を指すため、同一Webサイト内のリンクにのみ使用可能、外部サイトへのリンクには使えません。

外部サイトへのリンクを貼る際は、必ず絶対パスでなければならない、ということを覚えておきましょう。

アンカーテキストにはキーワードを入れる

2つ目の注意点は、アンカーテキストにキーワードを入れることです。

アンカーテキストとはリンク先を示すテキストを指し、このテキスト部分に検索ユーザーが入力する可能性のあるキーワードを含めると、そのページが該当のキーワードに関連する内容を持つことを検索エンジンに伝えることができ、SEO効果が期待できます。

ただし、キーワードを無理に詰め込むと「キーワードスタッフィング」とみなされてしまい、逆に検索エンジンからペナルティを受ける可能性もあるため注意しなければなりません。

画像リンクの場合はaltタグを入れる

3つ目は、画像にリンクを貼る場合、altタグを必ず使用することです。

altタグは、画像がインターネット環境などにより表示できない場合、代替テキストを表示させます。

検索エンジンのクローラーは、画像であることは理解できるものの、その内容は解析できません。しかし、altタグに画像の内容に関するテキストを入力しておけば、その情報を理解できるようになり、SEO効果も期待できます。

altタグに入力するテキストには、画像の内容を正確に表す簡潔な説明を含めることが推奨されています。

特に、キーワードを自然に含めるとさらにSEOに有利ですが、キーワードを無理に詰め込めばキーワードスタッフィングと判断されてしまいます。

画像に関する正しい情報を簡潔にまとめ、可能であればキーワードも盛り込むようにしましょう。

まとめ

aタグとは何か、書き方や属性、使い方について解説しました。

他のページへのリンクだけでなく、aタグには様々な使い道があり、属性を与えることでSEO効果も得ることができます。

自社サイトにaタグを設置し、内部リンクや外部サイトへのリンクを貼っている場合は、このページでご紹介した内容を参照しながら、「正しいaタグ」に変更しておきましょう。