HTMLのhref属性の書き方！リンクの指定と活用 [ホームページ作成] All About

href属性の書き方や使い方

HTMLのa要素を使ってリンクを作る際には、href属性を使います。href属性値にファイル名やURLなどを記述しておくと、そのリンクがクリックされた際にそこへ移動できます。このhref属性値の書き方には数種類があります。今回は、このhref属性の書き方を簡単にざっとご紹介いたします。

【本記事の目次】

1. そもそもhrefの読み方と意味は何？

href属性の「href」が何の略称なのかは文法に定義されているわけではありませんが、HTMLの生みの親であるティム・バーナーズ＝リー氏の文書によるとHypertext Referenceの略だそうです。Hypertext(ハイパーテキスト)とは、複数の文書をネットワーク状に繋げる文書構造のことで、HTMLの「HT」がHypertextの略です。Reference(リファレンス)は「参照」という意味ですね。したがって、hrefは「Hypertextの参照先」というような意味でしょう。

このhrefの読み方は、概ね「エイチ・レフ」のようです。Referenceをリファレンスと読むなら「エイチ・リフ」ではないのか、とか、「エイチアールイーエフ」と読んではいけないのか、などいろいろ意見はあると思います。仕様で決まっているわけでもないので各人の好きなように読めば良いのですが、他者と口頭で話す際には大勢が使っていそうな「エイチ・レフ」と読んでおくのが無難でしょう。

余談ですが、私はまだ情報量の多くなかった頃にHTMLを独学で習得したためか、ずいぶん長い間「エイチアールイーエフ」とそのまま読んでいました。そもそも「そこにhref属性を書いて」などと喋る機会はこの20年間でただの1度もありませんでしたから、全く困ることはありませんでした。

2. href属性値にリンク先を指定する際の書き方

a要素を使ってリンクを作る際には、href属性値にリンク先を記述します。

<a href="リンク先">リンク文字</a>

例えば「All About」という文字で https://allabout.co.jp/ へのリンクを作るには下記のようにHTMLソースを書きます。

<a href="https://allabout.co.jp/">All About</a>

3. href属性値にURLを指定する際の書き方

href属性値に記述するリンク先は、下記のような複数種類の書き方ができます。記述量の多い順に、その書き方を簡単にご紹介いたします。

■「http://」や「https://」などのプロトコル名からURLを全部記述する：

href="http://www.example.com/food/fruit/yellow/banana.html"

自サイト以外へリンクする際には、この書き方が標準的でしょう。あまり使う機会はないでしょうが、HTTP以外のプロトコル(FTPなど)を指定することもできます。

■プロトコル名を省略して「//」からドメイン名を記述する：

href="//www.example.com/food/fruit/yellow/banana.html"

この場合、今見ているページがhttpならhttpでアクセスされますし、今見ているページがhttpsならhttpsでアクセスされます。やや特殊な書き方ですね。

■ドメインを省略して「/」記号で始まる絶対パスで記述する：

href="/food/fruit/yellow/banana.html"

同一サイト内のリンクを作る際には、いちいちドメイン名を書くのは面倒です。その場合は「/」記号で書き始める絶対パスを使うと楽です。

■現在位置から見た相対パスで記述する：

href="./yellow/banana.html"

上記の場合は、現在位置のページと同一フォルダの中にある「yellow」サブフォルダに含まれる「banana.html」へリンクしています。「./」はカレントディレクトリ(＝現在のフォルダ)を示す特殊な記法です。上記のhref属性値は以下のように記述しても同じ意味です。

href="yellow/banana.html"

このように、現在位置を基準にして相対的に位置を示す記述方法が相対パスです(詳細は後述)。

■ファイル名だけを記述する：

href="banana.html"

これは相対パスの一種です。現在位置のページと同じフォルダに含まれているファイルへリンクするなら、フォルダ名などを一切省略して単にファイル名だけを書けばリンクできます。

4. href属性値に指定する絶対パスと相対パスの違い

先程ご紹介したように、href属性値には「http://」などのプロトコル名から書いても構いませんが、同一サーバ内に存在するファイルを示すなら相対パスや絶対パスで書く方が短く済みます。ドメイン名を書かない分、ウェブサイトを引っ越す際にも修正量が少なくて済むメリットもあります。

絶対パスと相対パスの違いは、簡単に言えば、

最上階層からの場所を示すのが絶対パス (＝現在位置に関係なく記述は同じ)
現在位置からの場所を示すのが相対パス (＝現在位置によって記述が異なる)

です。

例えば、現在位置(＝今ユーザがブラウザで表示しているページのURL)が、 http://www.example.com/food/fruit/yellow/lemon.html の場合、絶対パスでのリンクと相対パスでのリンクでは、以下のように移動します。

■絶対パスで記述したリンク：

<a href="/food/fruit/yellow/banana.html">バナナ</a>

上記のリンク先は http://www.example.com/food/fruit/yellow/banana.html になります。絶対パスは、同一ドメインの最上階層からの経路(ディレクトリ構造)をすべて記述します。記述量は多くなりますが、現在位置を気にする必要がないため分かりやすく、自身(ファイル)を置く場所を移動させてもリンクを修正する必要がないメリットがあります。

■相対パスで記述したリンク：

<a href="../green/melon.html">メロン</a>

上記のリンク先は http://www.example.com/food/fruit/green/melon.html になります。相対パスは、現在位置から見た移動経路のみを記述します。「../」は一つ浅い階層を指し示す特別な記述方法です。相対パスは、記述量が少なくて済み、近隣にあるファイルを指し示しやすいメリットがあります。

また、ウェブサーバにアップロードする前にローカル(＝自身のPC内)で表示確認をしたいなら、相対パスでの記述が便利です。

※絶対パスと相対パスの違いについては話が長くなりますので、図を交えて解説した記事「HTML・CSSでファイルパスを記述する方法」をご参照下さい。

5. href属性と併用するtarget属性：リンク先をどこに開くのかを指定

a要素にtarget属性を加えると、リンク先を別のウインドウや別のタブで開けます。しかし、利用者の意思に関係なく新しいウインドウやタブを開く動作は、あまり推奨される方法ではありません。絶対にその方が便利だと確信が持てる場合以外では使わない方が望ましいでしょう。

<a target="_blank" href="https://allabout.co.jp/">All About</a>

上記のように、target属性値に値「_blank」を指定すると、そのリンク先はブラウザの新しいタブ(または新しいウインドウ)で表示されます。なお、値「_top」を指定すると、フレームを解除して現在のウインドウ全体にリンク先が表示されます。

6. href属性と併用するdownload属性：ダウンロードリンクの作り方

a要素にdownload属性を加えると、リンク先には移動せず、リンク先をファイルとしてダウンロードさせることができます。ただし、指定ファイルが同一ドメイン下にある場合のみです。

<a download href="sea.jpg">海の写真</a>

上記は sea.jpg という画像ファイルへのリンクですから、通常ならクリックすると画像が表示されます。しかし、ここではdownload属性が付加されていますので(※)ブラウザ上に画像が表示されるのではなく画像ファイルのダウンロードになります。

※download属性は比較的新しい仕様なので一部のブラウザでは無視されます。download属性が無視された場合は通常のリンクとして機能します。本稿執筆時点でdownload属性を無視する代表的なブラウザは、Internet ExplorerとiOS版Safariです。Edgeは13以降なら有効で、macOS版Safariは10.1以降なら有効、Android Browserは4.4以降で有効です。それ以外の代表的なブラウザ(Chrome、Firefox、Opera)は、概ね古いバージョンから使用可能です。

7. ページ内リンクを作る「#」で始まるhref属性値の書き方

href属性値に「#」記号から始まる文字列を指定すると、ページ内リンクが作れます。

<a href="#position">ポジション</a>

上記のようにリンク先を記述すると、現在のページ内で「position」というフラグメントが付加された場所へ移動するページ内リンクになります。フラグメントはid属性を使って下記のように記述することで作れます。

<div id="position">ここが移動先</div>

1つのページ内に同一id名は1回しか使えない規則ですから注意して下さい。このようなページ内リンクは、本記事の冒頭にある目次でも使っています。

8. ページ最上部へのリンクを作るhref属性値の書き方

文章量が多くて縦方向に長いウェブページでは、そのページの最上部に戻るためのページ内リンクを設けたいことがあります。その際によく使われる方法は、まずページの最上部に存在する要素に適当なid名を割り振っておいて、そのid名を使ってページ内リンクを作る方法です。この方法は分かりやすいですが、事前にid名を割り振っておくという事前準備が必要なので手間がかかります。

HTML5では、そういった事前準備がなくてもページの最上部へリンクできる下記の書き方が仕様として加わりました。

<a href="#top">このページの最上部へ戻る</a>
<a href="#">このページの最上部へ戻る</a>

どちらの書き方でも(※)、ページの最上部へ移動するページ内リンクになります。

※id属性値に「top」が指定されている要素が存在するページでは、そこへのページ内リンクとして機能しますので、ページ最上部へのリンクにはなりません。したがって、事前準備なしにページ最上部へのリンクを作りたい場合は、単に「#」記号だけをhref属性値に指定する方法を使う方が無難でしょう。

9. メールへのリンクを作るhref属性値の書き方

href属性値を「mailto:」で書き始めれば、メールアドレスにリンクすることもできます。クリックすると、多くの環境ではメーラ(＝メールを送受信するためのソフトウェア)が起動して、指定のメールアドレスに新規メールを送信できる画面が現れます。

<a href="mailto:mymail@example.com">mymail@example.com</a>

上記のようにリンクを作ると、メーラが正しくセットアップされている環境でクリックされた際には mymail@example.com へメールを送る画面が現れます。

ただし、この方法でリンクするとそのメールアドレスにスパムメール(迷惑メール)が届くようになってしまうため、あまりお勧めはできません。回避方法にはいくつかあり、記事「スパムを防止しつつメールアドレスを公開する方法」で解説していますので、併せてご参照下さい。

10. 自分自身を指し示すリンクの作り方

自分自身を指し示すリンクを作ることで、ページ内リンクを作って貰いやすくするテクニックがあります。

<a href="#jumpto" id="jumpto" >見出し</a>

上記のリンクには、id属性で「jumpto」というid名を付加した上で、href属性値に「#jumpto」というフラグメントを指定しているため、自分自身を示すページ内リンクになります。

このリンクをクリックしてもどこへも移動はしませんが、ブラウザのアドレス欄に表示されるURLは、今クリックした位置を指し示すフラグメントが付加されたURLに変化します(※)。これによって「このページのこの位置に直接リンクしたい」と思った方々へ、簡単に「現在位置へリンクする方法」を示すことができます。

※アドレス欄の表示が https://www.example.com/page.html のときに上記のリンクをクリックすると、アドレス欄の表示は https://www.example.com/page.html#jumpto に変わります。

11. href属性はa要素以外にも使える

本記事のこれまでの解説では、href属性をa要素で使うことだけを説明してきました。しかし、href属性はa要素以外に、link要素、area要素、base要素でも使います。下記に、それらの書き方を簡単に紹介しておきます。

■link要素：
link要素の用途は様々ですが、例えばスタイルシート(CSS)ファイルを読み込む際には、href属性でCSSファイルの位置を示します。

<link rel="stylesheet" href="style.css" type="text/css">

上記は、style.cssファイルをスタイルシートとして読み込む記述例です。

■area要素：
1つの画像の中に座標に応じて複数のリンクを作成できるイメージマップを作る際に、それぞれのリンク先をhref属性で指定します。詳しくは記事「イメージマップの作り方 1画像内に複数リンクを設定」をご参照下さい。

■base要素：
そのページ内でのリンク先の基準になる絶対URLを示します。

<base href="http://www.example.com/folder/">

上記のようなbase要素をhead要素内に記述しておくと、そのページ内に含まれる相対パスで記述されたリンクは、すべてこのhref属性値で指定したURLに対する相対パスだと解釈されます。例えば、以下のような相対パスでのリンクがあれば、

<a href="page.html">移動先</a>

このリンク先は、 http://www.example.com/folder/page.html だと解釈されます。紛らわしいので、よほどこれを使う必要性がない限りは使わない方が良さそうです。

href属性の書き方いろいろ

今回は、HTMLでリンク先を指定する際などに記述するhref属性の基本的な書き方を解説いたしました。単にURLを指定するだけが用途ではありません。ぜひ、様々な活用方法を試してみて下さい。

【関連記事】

※記事内容は執筆時点のものです。最新の内容をご確認ください。

※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

HTMLのhref属性の書き方！リンクの指定と活用