HTMLのリンクの張り方

リンクパス

パスの種類 説明 記述例
絶対パス (absolute path) スキーム名からはじめる完全なURL http://example.com/
相対パス
(relative path)
ドキュメント相対パス※1 現在のドキュメントを基準としたパス image/sample.jpg
サイトルート相対パス サイトのルートを基準としたパス /image/sample.jpg
Adobe Dreamweaver * リンクおよびナビゲーションについて

※1 ドキュメント相対パスで記述した場合、

  • http://example.com//a.htm
  • http://example.com/xx///a.htm

のように複数のスラッシュを連続で指定されたときには、サーバの設定によってはリンク先が正しく解釈されないことがあります。

ページの遷移

リンク先 コード 記述方法
ルートディレクトリ
<a href="/"></a>
スラッシュのみ
カレントディレクトリ
<a href="./"></a>
ピリオド1つとスラッシュ
親ディレクトリ
<a href="../"></a>
ピリオド2つとスラッシュ

ファイル名を省略した場合、そのディレクトリにindex.htmlなどのファイルが存在し、さらにサーバで適切に設定がされていないと、そのページへは移動しません。

属性値によるリンク先の違いを確認できます。

カレントディレクトリへの移動

http://example.com/xx/a.htm … (1)
↓
http://example.com/xx/ … (2)

(1)のURLにあるページにおいて<a href="./"></a>のようなリンクをクリックすると、(2)のURLへ移動します。

親ディレクトリへの移動

http://example.com/xx/a.htm … (1)
 ↓
http://example.com/ … (2)

(1)のURLにあるページにおいて<a href="../"></a>のようなリンクをクリックすると、(2)のURLへ移動します。

検索エンジンのボットに対するリンクの制御 (rel="nofollow")

a要素の属性にrel="nofollow"を付加することで、検索エンジンのロボットに対してクロールする必要がない、もしくはクロールさせたくないリンクであることを明示できます。

<a href="index.htm" rel="nofollow"></a>