【サンプルあり】HTMLのaタグとは？画像リンク、ページ内リンク、別タブ指定等、使い方を徹底解説！

HTMLのコーディング作業で、リンクを指定したいときは、aタグを使用しますよね？

リンク指定とは言っても、下記のようにどうしたいかで、指定方法が変わります。

色々ありますね。

このページでは、HTMLのaタグについて、使い方を徹底的に解説します。サンプルも付けましたので、是非やり方を覚えていただければと思います。

お助け猫

今回の記事は、次のような方にお勧め！
・aタグの使い方を徹底的に理解したい方
・aタグ指定方法でお困りの方

aタグとは？

そもそも、aタグとは何か知らない方の為に解説をします。

aタグとは、HTMLのタグの一つで、リンクを指定する際に使用するタグです。

<a href="リンク先ページへのパス">リンク指定したいものが入ります</a>

「<a>」「</a>」の間に、リンク指定したいものを挟み、リンク先は、href属性に、相対パスまたは絶対パスを指定します。「””」の間にパスを指定するという事ですね。

上記が、基本的なaタグの指定方法になります。しかし、冒頭でも述べたように、どう指定したいかによって、指定方法が異なるので、詳しく見ていきましょう。

パターン別、aタグの指定方法について

それでは早速、パターン別に指定方法をご紹介していきます。

テキストをリンクにしたい

テキストをリンクにしたい場合は、下記のような書き方をします。

<a href="リンク先ページへのパス">ここがリンクテキストになります</a>

リンクを指定したいテキストの部分を<a></a>で囲む事で、その部分がリンクとなります。

画像をリンクにしたい

画像自体をリンクにしたい場合は、下記のような書き方をします。

<a href="リンク先ページへのパス">
  <img src="画像のパス" alt="代替えテキスト">
</a>

こちらも、先ほどのテキストの場合とほぼ同じで、imgタグを<a></a>で囲む事で、画像自体をリンクにすることができます。

ページ内リンクを指定したい

ページ内リンクを指定したい場合は、下記のような書き方をします。

<a href="＃リンク先のid名"></a>

<h1 id="id名">aタグとは？</h1>

ページ内リンクを指定するには、初めに、リンク先のタグにid属性を追加します。それから、aタグのhref属性を「#リンク先のid名」というように設定します。「#」のつけ忘れにご注意ください。

サイト内の他のページにリンクしたい

サイト内の他のページにリンクしたい場合は、下記のような書き方をします。

<a href="〇〇.html"></a>

href属性のリンク先に直接ファイルを指定すれば、他のページにリンクすることができます。

別のサイトにリンクしたい

別のサイトにリンクしたい場合は、下記のような書き方をします。

<a href="https://〜"></a>

ドメイン名が違う別のサイトにリンクしたいときは、href属性にリンク先URLを直接入力すれば大丈夫です。

リンク先を別タブで開くようにしたい

リンク先を別タブで開きたい場合は、下記のような書き方をします。

<a href="リンク先ページへのパス" target="_blank"></a>

aタグに、「target=”_blank”」を追加することで、別タブでリンク先を開いてくれるようになります。

メールアドレスをリンクにしたい

メールアドレスをリンクにしたい場合は、下記のような書き方をします。

<a href="mailto:メールアドレス"></a>

aタグのhref属性に、「mailto:メールアドレス」を書いておくと、そのリンクをクリックしたときに、メールアプリが起動するようになります。

ただし、こちらのテクニックですが、サイト上にメールアドレスを晒す事になるので、スパムメールが来るリスクが高まるという点にご注意ください。

電話番号をリンクにしたい

電話番号をリンクにしたい場合は、下記のような書き方になります。

<a href="tel:電話番号"></a>

aタグのhref属性に、「tel:電話番号」という形で書く事で、リンクをタップすると電話をかけられるようになります。

当然、スマートフォン等、電話の発信が出来る機器に限ります。

知っておくと便利な指定方法

aタグを使う上で、知っておくと便利な指定方法についてご紹介しておきます。

title属性を使う

title属性を使用する事で、「ツールチップ（ツールヒント）」を表示できるようになります。補足的な情報を追加する際に便利な指定です。

 <div class="backgroud-gray">
  <a href="パスが入ります" title="jpg画像 1MB"></a>
 </div>

ホバーして数秒待つと、「jpg画像 1MB」という文字列が表示されると思いますが、これがツールチップです。

まとめ

aタグは、どうしたいかによって、指定方法が異なる事を理解していただけましたでしょうか？

今回ご紹介した内容を、テクニックとして覚えていただければ幸いです。