HTML5のhref属性の使い方まとめ、リンクの基礎から徹底解説
  • facebookページ
  • twitterページ
  • 2020.02.27

    HTML5のhref属性の使い方まとめ、リンクの基礎から徹底解説

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

    aタグのhref属性の使い方

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

    aタグの文法

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

    aタグの文法

    簡単なaタグの例

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

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

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

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

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

    HTML5から追加されたdownload属性

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

    download属性を使った例

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

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

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

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

    相対リンク

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

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

    相対リンクの例

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

    絶対リンク

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

    絶対リンクの例

    ジャンプ先

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

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

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

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

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

    herfはJavaScriptを呼び出せる

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

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

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

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

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

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

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

    メールのリンクは要検討

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

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

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

    「mailto:」を使った例

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

    まとめ

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



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア

    関連ワード

    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE