バナー画像

今回は、aタグ(アンカータグ)でリンクを作成する際に用いるhref属性の使い方や注意点について紹介していきます。

aタグのhref属性の使い方

Webページに必須な機能の一つが他のwebページのリンクです。そして、HTMLではリンクをaタグで記述し、そのリンク先の指定に使われるのがhref属性です。まずは、aタグおよびhref属性の基本について解説します。

aタグの文法

aタグのaはアンカーの略で、英語のAnchorが基になっています。つまり、船の錨のように、外にあるHTMLを繋ぎとめるタグと言えるでしょう。そして、リンク先のURLやファイル名をhref属性で指定し、クリックする文字や図形などをタグで囲って指定します。

aタグの文法

<a href="リンク先のURL">
アンカーテキストまたは図形
</a>

簡単なaタグの例

<a href="https://style.potepan.com/">
働くエンジニアマガジン「ポテパンスタイル」
</a>

上記の例では、href属性で「../index.html」指定し、アンカーテキストとして「ひとつ上のディレクトリへ」を指定しています。

aタグで使えるhref以外の属性

aタグで使える属性は、hrefだけではありません。リンク先を今のWebブラウザのウィンドウに開くか、新しいウィンドウに開くかを指定するtarget属性もよく使われます。

リンク先を新しいウィンドウに開く場合の例

<a href="https://style.potepan.com/ target="_blank">
働くエンジニアマガジン「ポテパンスタイル」
</a>

なお、HTMLのバージョン5からは、ジャンプ先やスタイルシートによる修飾などにid属性を使います。そのため、id属性もよく使われます。

HTML5から追加されたdownload属性

HTMLのバージョン5から、aタグの属性として、download属性が追加されました。これを使えば、Webブラウザに表示されてしまうテキストファイルであっても、そのファイルをダウンロードするようにWebブラウザに指定できます。

download属性を使った例

<a href="sample.txt" download>
リンクテキスト
</a>

また、download属性でファイル名を指定すると、サーバー上とは違うファイルでダウンロードさせることも可能です。

サーバー上のファイル名とダウンロードしたファイル名が異なる例

<a href="template_20200131_2.pdf">
テンプレートPDF
</a>

href属性に書けるリンク先の種類

先ほど、href属性には外部のHTMLファイルを記述すると説明しましたが、同じサーバーのファイルでも他のサーバーのファイルでも指定できます。なお、ファイルを指定する方法として、相対リンクと絶対リンクがあるので、その違いについても解説します。

相対リンク

Linuxでは、今のディレクトリの一つ上のディレクトリを、「../」と指定します。そして、この書き方はURLでも使えます。例えば、「../index.html」は、「../」が一つ上のディレクトリを意味するので、「ひとつ上のディレクトリのindex.html」をリンクする、という意味です。

この「../」は、複数重ねて使うこともできます。例えば、3つ上のディレクトリなら「../../../」といった具合です。そのため、次のような複雑な相対リンクも書けます。

相対リンクの例

<a href="../../../office/contact.html">
問い合わせ先
</a>

上の例では、「../../../」で3つ上のディレクトリにある、「office」の中の「contact.html」をリンクします。

絶対リンク

絶対リンクは、Webブラウザに指定するURLと同じものを指定します。具体的には、「https://」で始まる全てのURLで、外部のサーバーはこの書き方が必須ですが、同じサーバーでも使えます。

絶対リンクの例

<a href="https://style.potepan.com/">
働くエンジニアマガジン「ポテパンスタイル」
</a>

ジャンプ先

aタグのリンク先には、同じHTML内の特定の場所を指定することも可能です。縦の長いWebページでは、途中や最も下に「先頭に戻る」といったリンクがあるのをご存じでしょう。このような同じページのジャンプをリンク先として指定するには、href属性に「#」を付けて使います。

なお、HTMLのバージョン5では、ジャンプ先として特定のidを「#」を付けてください。以前のHTML4.01では、name属性でしたが、バージョン5からidに変わっています。下記の例を参考にしてください。

aタグを使ったジャンプリンク

<a href="top">トップ</p>
...
<a href="#top">ページの先頭へ</a>

また、外部のHTMLファイルの特定の場所を表示させることも可能です。次のように、リンク先に「#」を付けてid名を指定します。

外部のHTMLファイルの特定の場所を表示させる例

<a href="../index.html#section3">
セクション3へ
</a>

herfはJavaScriptを呼び出せる

JavaScriptを実行するトリガーは、ボタンを押したり、文字を入力したりといろいろな要素に対して設定できますが、aタグで作成したリンクに設定することも可能です。この場合、リンクの文字をクリックすることでJavaScriptを実行することになるので、onclickといった属性は不要です。そして、実行するJavaScriptの指定には、href属性を使います。

リンク先としてJavaScriptを指定する方法

<a href="JavaScript:(JavaScripttの関数名)">
(リンクの文字列)
</a>

リンク先としてJavaScriptを指定する例

<a href="javascript:alert("リンクが押されました");">
alertを表示
</a>

アンカータグでJavaScriptを呼び出すメリット

アンカータグでJavascriptを呼び出すメリットは、phpなどのサーバー側で動作するプログラムと相性が良い点です。幾つもの候補の中からユーザーに選んでもらい、それをJavascriptの引数として利用する画面では、シンプルに書けるアンカータグが最適と言えます。

プログラムで作成したJavaScriptを呼び出すaタグの例

<a href="javascript:Ajax_Get_detail("NO10001");>NO10001の詳細</a>
<a href="javascript:Ajax_Get_detail("NO10002");>NO10002の詳細</a>
<a href="javascript:Ajax_Get_detail("NO10003");>NO10003の詳細</a>

上の例では、JavaScriptの関数Ajax_Get_detail()を実行するトリガーをリンクで実現した例です。このようなHTMLなら、引数となる「NO10001」から「NO10003」を基に、サーバー側のプログラムで簡単に生成できます。

メールのリンクは要検討

かつて、インターネットが普及し始めたころ、Webページにはメールアドレスのリンクが用意されており、それをクリックするとメールソフトが起動して、簡単にメールを送信できました。しかし、今ではそういったリンクを見かけなくなりました。

今の時代、HTMLでメールアドレスを公開してしまうと、自動でアドレスだけが読み取られ、大量のスパムメールが送られてしまいます。そのため、今はWebページでメールアドレスを公開しないのが常識です。

なお、aタグのhref属性に「mailto:メールアドレス」と書いて公開することで、そのリンクをクリックすると自動でメールソフトが起動し、そのメールアドレス宛に簡単にメールが作れます。

「mailto:」を使った例

<a href="mailto:support@xxx.xxxx.xxxx">
サポートのメールアドレス
</a>

しかし、この方法で公開してしまうとメールを使った攻撃に使われることが多いので、別の方法を検討してください。

まとめ

HTMLのa(アンカー)タグでリンク先のURLを指定するhref属性は、他にもページ内のジャンプ先やJavaScriptの呼び出しなどにも使えます。また、リンク先をWebブラウザで表示するだけでなく、ファイルとしてダウンロードさせることも可能です。使い方によっては便利な機能を提供してくれるので、ぜひ、活用してください。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。