HTML a タグの href 属性を使用して相対パスと絶対パスを指定する方法

実際のWeb開発では、画像の挿入やCSSファイルなどすべてパスが必要となります。ファイルパスを誤って追加すると参照が無効になります（リンク先のファイルが参照できない、挿入した画像が表示されないなど）。初心者の方は混乱することが多いと思います。以下では相対パスと絶対パスについて詳しく紹介します。

HTML相対パス
このファイルが配置されているパスによって生じる、このファイルと他のファイル (またはフォルダー) 間のパス関係を参照します。
例えば：
ファイル 1.htm の絶対パスは d:/www/html/1.htm です。
ファイル 2.htm の絶対パスは d:/www/html/2.htm です。
すると、1.htm の 2.htm に対する相対パスは次のようになります: 1.htm

相対リンクの使用方法:
同じディレクトリにリンクする場合は、リンク先のドキュメントの名前を入力するだけです。例:

次のレベルのディレクトリにリンクする場合は、最初にディレクトリ名を入力し、次に「/」を追加して、ファイル名を入力する必要があります。例:

上位ディレクトリに接続する場合は、最初に「../」と入力し、次にディレクトリ名とファイル名を入力する必要があります。例:

例の要約
現在、HTML ファイルは 4 つあります: aaa.html、bbb.html、ccc.html、index.html
aaa.html のパスは、D:/www/adminwang/html/aaa.html です。
bbb.html のパスは、D:/www/adminwang/bbb.html です。
ccc.html のパスは、D:/www/ccc.html です。
index.htmlのパスはD:/www/index.htmlです

1. 同じディレクトリ内のファイルをリンクする
たとえば、ccc.html ファイルを index.html にリンクするコードは次のようになります。

2. 前のディレクトリのファイルへのリンク
たとえば、bbb.html が ccc.html にリンクするためのコードは次のようになります。

3. 上位2つのディレクトリ内のファイルへのリンク
たとえば、aaa.html を ccc.html にリンクするコードは次のとおりです。

4. 下位ディレクトリのファイルをリンクする
たとえば、ccc.html を bbb.html にリンクするコードは次のとおりです。

5. 次の2つのディレクトリ内のファイルへのリンク
たとえば、ccc.html が aaa.html にリンクするコードは次のようになります。

HTML 絶対パス
該当する場合はプロトコルまたはドライブ文字を含む、ファイルへの完全なパスを指定します。つまり、ハードディスク上のホームページ上のファイルまたはディレクトリの実際の完全なパスです。例えば：
http://www.adminwang.com/index.htm
d:/ www /html/images/bg.jpg
絶対パスについては特に言うことはありません。相対パスをマスターすれば、絶対パスは非常に簡単になります。