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

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

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

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

アイキャッチ:ハイパーリンク

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

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

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

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

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

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

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

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

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

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

HTML
絶対パスの例
<a href="https://weblan3.com/html/reference-hyperlink">このページへジャンプ</a>
表示確認
このページへジャンプ
※別タブで開くように設定しています

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

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

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

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

HTML
相対パスの例
<a href="reference-hyperlink">このページへジャンプ</a>
表示確認
このページへジャンプ
※別タブで開くように設定しています

相対パスは、リンクを設置しているファイルの場所から、リンク先のファイルが「相対的に」どこにあるかによって記述内容を指定します。次の例を見て下さい。

ディレクトリ
public
|
| index.html
| about.html
|
+--page / p001.html
    |     p002.html
    |     p003.html
    |
    +--log / log001.html
    |        log002.html
    |        log003.html
    |
    +--img / top.png
             sub.png

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

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

そして「log」、「img」フォルダには、更に別のファイルが入っています。これは三階層目にあたります。

パターンA:同じ階層のリンク

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

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

パターンB:下の階層へリンク

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

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

パターンC:上の階層へリンク

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

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

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

ハイパーリンクのまとめ

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

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

HTMLリファレンス一覧