リンクの設定

a要素の使い方

他のWebページへのリンクを設定するにはa要素を使います。a要素の書式は次の通りです。

<a href="リンク先を表すURI">文字列あるいは画像</a>

同じ階層のページへリンク

リンクを設定する場合、同じサイト内のページへリンクを張る時には相対パスを使います。同じ階層にあるファイルへのリンクは次のように記述します。

<a href="ファイル名">テキスト（あるいは画像）</a>

下の階層のページへリンク

下の階層のファイルへのリンクは次のように記述します。

<a href="ディレクトリ名/ファイル名">テキスト（あるいは画像）</a>

上の階層のページへリンク

上の階層のファイルへのリンクは次のように記述します。1つ上の階層は「..（ドットドット）」で表します。2つ以上の上の階層も同じように「../../ファイル名」など「..」を階層の分だけ「/」でつなげて記述します。

<a href="../ファイル名">テキスト（あるいは画像）</a>

他サイトへリンク

他のサイトにあるWebページへのリンクは次のように記述します。

<a href="リンク先WebページのURI">テキスト（あるいは画像）</a>

画像へのリンク設定

リンクを設定する場合はa要素のコンテンツの部分に記述されたテキストをクリックするとリンク先へ移動しますが、コンテンツにはテキストだけではなく画像を表すimg要素を記述することもできます。
img要素に対してリンクを設定する場合は次のように記述します。

文書の中の特定の場所へリンク

リンク先はWebページの文書の中の特定の場所へリンクを設定する事も可能です。特定の場所がページの先頭でなかった場合、リンク先へ移動すると指定した場所が表示されるように自動的にスクロールされます。
特定の場所へリンクを設定するには、リンク先となる特定の場所に目印を付けておく必要があります。その為、リンク先のWebページを編集できなければなりませんので必然的に自分で管理しているWebページが対象となります。
リンク先の場所へ目印を付けるにはid属性を使います。
id属性はa属性に限らず様々な要素で指定することができます。

リンクの記述方法はリンク先のURLの後にシャープ「#」を記述した後で目印に付けた名前を記述します。