ハイパーリンクについて理解する

リンクはハイパーテキストの代名詞

HTMLがもたらす機能の中で最も優れているのはハイパーリンクです。リンクとは、分かりやすく言えば文書と文書をつなぐ架け橋のようなもので、インターネット上に散らばっているドキュメントを相互に関連付ける役目を果たします。

WWW（World Wide Web）に公開されているウェブページであれば、URLを参照してどこにでもリンクを貼る事ができます。日本のサイトから海外のサイトへだって、たったのワンクリックで移動できます。

リンクをつなぐ<a>タグ

ハイパーリンクを設置するには以下のタグを使います。

<a href="https://weblan3.com/">リンクする文字</a>

<a>というタグは、href属性で移動先のURLを指定できます。ページ以外にも画像や動画などのサーバー上に公開されたコンテンツであれば、どこへでもリンク先を指定することができます。この要素は通称「エー・エイチレフ」と読み、「a」は"anchor"、「href」は"hypertext reference"の略だとされています。

リンクの指定方法は、大きく分けて二種類あります。自分のウェブサイトの住所にあたるURLと同じドメイン上にあるものと、別のドメインが割り当てられたサーバーに置かれたものを指す場合です。ドメインが同じであれば「相対パス」、ドメインが違う場合は「絶対パス」という記述形式を用います。

それでは、実際にリンクを設置する場面を想定して、「絶対パス」と「相対パス」の違いを見ていきましょう。

絶対パスによるリンク指定

「絶対パス」は、HTTPからのアクセスに対して絶対的な場所を示すアドレスです。日本の住所に例えると、「日本国/東京都/渋谷区/何丁目/何番地」という具合に、可能な限り詳しい場所を記述する形式になります。

私たちが普段使っているインターネットは、HTTPというプロトコル（手続き形式）を使ってアクセスする空間です。日本人は日本の土地に住んでいるという前提を共有しているからこそ、都道府県の名前を言えば通じるのです。

インターネットの世界では、HTTPが住所の最大広域にあたります。そのため、アドレスの先頭から書いた形式を絶対パスとして扱います。これをフルアドレスと言い換えることもできます。

<!-- 絶対パスの例 -->
<a href="https://weblan3.com/html/reference-hyperlink">このページへジャンプ</a>

このように、アドレスバーに表示されるURLと同じように「http」から始まるインターネット上の住所を全て記述します。絶対パスは、主に自分のサイトから外部のサーバーに置いてあるファイルにアクセスする場合に使用します。

相対パスによるリンク指定

「相対パス」は、リンク元のファイルが存在している位置から、リンク先のファイルの存在位置を相対的に表したアドレスです。同じサーバーに置いてあるファイルであれば、HTTPから記述するフルアドレスは必要ないので、自明な箇所を省略できます。

住所に例えると、東京都内から手紙を出す場合に「渋谷区/何丁目/何番地」と記載しても届くという具合です。

<!-- 相対パスの例 -->
<a href="reference-hyperlink">このページへジャンプ</a>

相対パスを使用する場合、現在地から相対的に見てリンク先のファイルがどこにあるかを指定します。ファイルまでの位置関係を表すには、次のディレクトリ構造に基づくパスを記述します。

public
|
| index.html
| about.html
|
+--page / p001.html
    |     p002.html
    |     p003.html
    |
    +--log / log001.html
    |        log002.html
    |        log003.html
    |
    +--images / header.png
                icon.png
			

上記の場合、「public」というフォルダに「index.html」などのHTMLファイルと「page」というフォルダが入っています。これが一階層目です。

そして「page」というフォルダの中には「p001～003.html」というファイルと「log」、「images」というフォルダが入っています。これがニ階層目になります。

さらに「log」、「images」フォルダの中には、別のファイルが入っています。これが三階層目にあたります。

パターンＡ：同じ階層のリンク

表示しているページが置いてある階層と、リンク先のファイルが同じ階層に置いてある場合は、<a>タグのhref属性にファイル名のみを記述します。

<!-- p001.htmlからp002.htmlへリンクする場合 -->
<a href="p002.html">リンクする文字列</a>

パターンＢ：下の階層へリンク

表示しているページが置いてある階層よりも、リンク先のファイルが置いてある場所が下の階層になる場合は、<a>タグのhref属性に「フォルダ名/ファイル名」と記述します。

<!-- index.htmlからp001.htmlへリンクする場合 -->	
<a href="page/p001.html">リンクする文字列</a>

パターンＣ：上の階層へリンク

表示しているページが置いてある階層よりも、リンク先のファイルが置いてある場所が上の階層になる場合は、<a>タグのhref属性に「../ファイル名」と記述します。

<!-- p001.htmlからindex.htmlへリンクする場合 -->
<a href="../index.html">リンクする文字列</a>

相対パスのメリットは、ローカルでファイルを作成している段階でフォルダ分けをして整理が出来る事と、HTTPからのドメインを記述しないため、サイト移転などでURLが変わってもリンクに影響がないので、メンテナンスの必要が無いという事です。基本的に、自分のウェブサイト内で別のページにリンクする場合は、相対パスを使いましょう。

ルート相対パスの指定方法

相対パスは、リンク元のファイルを起点とした相対的な位置関係を表すアドレスですが、もう一つ「ルート」を起点とする指定方法があります。それが「ルート相対パス」です。

「ルート」（root）とは物事の根本を表す言葉です。パソコンを扱っていると「ルート権限」という言葉を目にすることもあります。アドレスの話で言えば、URLの一番上の階層のことです。つまり「http」から「.com」や「.net」などの末尾までを含むドメインの事です。

ルート相対パスは、必ずスラッシュ（/）から始まります。相対パスで使用した形式の先頭にスラッシュ（/）を足すと、ドメインの末尾にスラッシュ（/）を引いた地点からの相対的な位置関係を表します。

<!-- ドメインの最上層の文字列 -->
https://example.com/　=> "/" を起点に相対化する

<!-- ページが存在するドメインのルートへリンク -->
<a href="/">リンクする文字列</a>

つまり、href属性の最初に書かれた文字がスラッシュ（/）であればルート相対パスを表し、そうでなければ普通の相対パスとして機能するということです。

<!-- ルートディレクトリに置かれたpageへリンク -->
<a href="/page.html">リンクする文字列</a>

<!-- fileディレクトリの中に置かれたpageへリンク -->
<a href="/file/page.html">リンクする文字列</a>

<!-- fileディレクトリ内のimagesディレクトリを参照 -->
<a href="/file/images/header.png">リンクする文字列</a>

ルート相対パスは、必ずドメイン末尾を起点とするため、リンク元のファイルを移動させても更新する必要はないというメリットがあります。これは、リンクの指定内容がファイルの存在位置に依存しないということです。どの階層のどのファイルに記述する時も、ドメイン末尾からのパスを書けば良いからです。

ルート相対パスは使い勝手が良いのでおすすめです。ただし、先頭のスラッシュ（/）を書き忘れたり、相対パスを使用すべき箇所で先頭にスラッシュ（/）をつけてしまわないように注意しましょう。

リンクするURLのファイルの拡張子について

<a>要素のhref属性にリンク先のアドレスを記述する際、ファイルの拡張子を書く場合と書かない場合があります。これはどちらが正解なのでしょうか？　答えは、サーバーの設定によります。

サーバーはアドレスのリクエストに応じてレスポンスを返すミドルウェアを備えています。このシステムの設定で、ファイルの拡張子を省略できるようにしてあれば、ソースコード上で省略したアドレスを受け付けます。

<!-- ファイルの拡張子まで書く -->
<a href="page/p001.html">リンクする文字</a>

<!-- ファイルの拡張子を書かない -->
<a href="page/p001">リンクする文字</a>

リンク先に指定するURLは、サーバーが受け付けるものであれば何でも構いません。サイトのURLにファイルの拡張子を含めるか否かは、サービスの内容や開発者の好みによって変わります。

サーバーの設定が分からない段階では、サイトを公開するサーバーの環境に合わせるしかありません。テスト用のファイルをアップロードして、拡張子なしのURLでアクセスした時にエラーが出なければ、拡張子の省略を受け付ける設定になっているということです。

サーバーがPHPなどを実行できるApacheというソフトウェアで稼働しているのであれば、.htaccessという設定ファイルを使用して、拡張子の名前解決に関する設定を行えます。

ハイパーリンクのまとめ

自分のサイト内のファイルにリンクする場合には「相対パス」で管理した方が更新が楽になります。画像や動画などのメディアファイルは、ひとつのフォルダにまとめておくと何処に何が置かれているのかが分かりやすくなり、作業効率がアップします。

<a>要素の仕様や属性の指定方法は詳細ページで確認して下さい。ハイパーリンクはHTMLを記述する上で、最も重要かつ使用頻度の高い要素です。この仕組みを上手く使いこなして、ウェブサイトを有益なものにしていきましょう。

HTMLリファレンス一覧