HTML の相対パスと絶対パスの違いの分析

HTML 初心者は、ファイルを正しく参照する方法という問題によく遭遇します。たとえば、HTML ページ内のハイパーリンクとして別の HTML ページを参照するにはどうすればよいでしょうか。ウェブページに画像を挿入する方法

ファイル参照（ハイパーリンクの追加や画像の挿入など）時に誤ったファイルパスを使用すると、参照が無効になります（リンクされたファイルが参照できない、挿入された画像が表示されないなど）。

これらのエラーを回避し、ファイルを正しく参照するには、HTML パスについて学習する必要があります。

HTML でパスを記述する方法には、相対パスと絶対パスの 2 つがあります。

HTML 相対パス
同じディレクトリ内のファイル参照ソースファイルと参照ファイルが同じディレクトリにある場合は、参照ファイル名を記述するだけです。

ここで、ソースファイル info.html を作成し、info.html 内のハイパーリンクとして index.html ファイルを参照します。

info.html へのパスが c:\Inetpub\wwwroot\sites\blabla\info.html であると仮定します。
index.html へのパスが c:\Inetpub\wwwroot\sites\blabla\index.html であると仮定します。
info.html に index.html へのハイパーリンクを追加するコードは次のように記述する必要があります。

<a href = "index.html">index.html</a>

親ディレクトリを指定する方法
../ はソースファイルの親ディレクトリを表し、../../ はソースファイルの親ディレクトリを表します。

info.html へのパスが c:\Inetpub\wwwroot\sites\blabla\info.html であると仮定します。
index.html へのパスが c:\Inetpub\wwwroot\sites\index.html であると仮定します。
info.html に index.html へのハイパーリンクを追加するコードは次のように記述する必要があります。

<a href = "../index.html">index.html</a>

info.html へのパスが c:\Inetpub\wwwroot\sites\blabla\info.html であると仮定します。
index.html のパスが c:\Inetpub\wwwroot\index.html であると仮定します。
info.html に index.html へのハイパーリンクを追加するコードは次のように記述する必要があります。

<a href = "../../index.html">index.html</a>

info.html へのパスが c:\Inetpub\wwwroot\sites\blabla\info.html であると仮定します。
index.html へのパスが c:\Inetpub\wwwroot\sites\wowstory\index.html であると仮定します。
info.html に index.html へのハイパーリンクを追加するコードは次のように記述する必要があります。

<a href = "../wowstory/index.html">index.html</a>

サブディレクトリがサブディレクトリ内のファイルを参照していることを示すにはどうすればよいでしょうか? サブディレクトリファイルのパスを記述するだけです。

info.html へのパスが c:\Inetpub\wwwroot\sites\blabla\info.html であると仮定します。
index.html へのパスが c:\Inetpub\wwwroot\sites\blabla\html\index.html であると仮定します。
info.html に index.html へのハイパーリンクを追加するコードは次のように記述する必要があります。

<a href = "html/index.html">index.html</a>

info.html へのパスが c:\Inetpub\wwwroot\sites\blabla\info.html であると仮定します。
index.html へのパスが c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html であると仮定します。
info.html に index.html へのハイパーリンクを追加するコードは次のように記述する必要があります。

<a href = "html/tutorials/index.html">index.html</a>
HTML 絶対パス
HTML 絶対パスは、ドメイン名を含むファイルの完全なパスを指します。

ドメイン名 www.jb51.net を登録し、仮想ホストを申請するとします。仮想ホストプロバイダーは www などのディレクトリを提供します。この www が Web サイトのルートディレクトリです。

たとえば、index.html ファイルを www ルートディレクトリに置いたとします。このファイルの絶対パスは https://www.jb51.net/index.html です。

www ルートディレクトリに html_tutorials というディレクトリを作成し、そのディレクトリに index.html ファイルを置いたとします。このファイルの絶対パスは https://www.jb51.net/html_tutorials/index.html です。

<<: JSネイティブ2列シャトル選択ボックスの実装例

>>: CSSとHTMLを組み合わせる4つの方法