リンクに関するHTMLタグ
HTMLでは、ホームページ上の別のドキュメントにリンクするためにハイパーリンクを使用します。
リンクのサンプル
ハイパーリンクのサンプル
このサンプルは、HTMLドキュメントの中でリンクを作成する方法をデモンストレーションします。
画像を使ったハイパーリンクのサンプル
このサンプルは、リンクとして画像を使用する方法をデモンストレーションします。
アンカータグとhref属性
HTMLでは、別のドキュメントへのリンクを作成するために<a>（アンカー）タグを使用します。
アンカーは、Web上のHTMLページ、画像、音声ファイル、動画などの任意のファイルを指定することができます。
アンカーを作成する構文は次のようになります。
<a href="url">表示させるテキスト</a><a>タグは、リンクするアンカーを作成するために使用され、href属性はリンクするべきドキュメントのURLを指定するために使用されます。そしてアンカータグで囲まれたテキストは、ハイパーリンクとして表示されます。
以下のアンカーは、ホームページ作成 & WebデザインのためのHTMLチュートリアルへのリンクを定義します。
<a href="http://html.w-d-potal.com/">
ホームページ作成 & WebデザインのためのHTMLチュートリアル
</a>上記のコードは、ブラウザ上では下記のように表示されます。
ホームページ作成 & WebデザインのためのHTMLチュートリアル
target属性
target属性で、リンクしたドキュメントがどこで開かれるかを定義することができます。
下記のコードは、新しいブラウザウィンドウでドキュメントを開きます。
<a href="http://html.w-d-potal.com/" target="_blank">
ホームページ作成 & WebデザインのためのHTMLチュートリアル
</a>アンカータグとname属性
name属性は、名前を付けられたアンカーを作成するために使用されます。訪問者が情報を探し求めるためにページをスクロールする代わりに、 ページの特定のセクションに直接ジャンプできるアンカーを作成することができます。
以下は、名前を付けられたアンカーの構文です。
<a name="label">表示させるテキスト</a>name属性は、名前を付けられたアンカーを作成するために使用されます。アンカーの名前は、任意に名付けることができます。
下記のコードは、名前を付けられたアンカーを定義します。
<a name="section2">第2章</a>名前が付けられたアンカーには、下線などが付いて表示されないことに気づいたはずです。
「第2章」に直接リンクするためには、以下のようにURLの最後に#とアンカーの名前を加えてください。
<a href="http://www.xxx.com/filename.html#section2">第2章へ</a>ファイル「filename.html」の範囲内での「第2章」へのハイパーリンクを作成する場合は以下のようになります。
<a href="filename.html#section2">第2章へ</a>基本メモ - 役立ちTips
サブフォルダを参照するためには、常にスラッシュ（/）を加えてください。href="http://html.w-d-potal.com/contents"のようにリンクすれば、サーバーがアドレスへスラッシュ（/）を加えて、href="http://html.w-d-potal.com/contents/"のような新しいリクエストを作成するので、サーバーへ2つのHTTPリクエストを生成することになります。
名前が付けられたアンカーは、大きなドキュメントの「目次」を作成するためによく使用されます。ドキュメント内の各セクションは、名前を付けられたアンカーを与えられ、これらのアンカーの各リンクはドキュメントの一番上に置かれます。
ブラウザが名前を付けられたアンカーを見つけることができない場合は、ドキュメントの一番上へ移動します。エラーは発生しません。
リンクのサンプル集
リンク先を新しいウィンドウで開くサンプル
このサンプルは、新しいウィンドウを開けることにより別のページにリンクする方法をデモンストレーションします。その結果、訪問者はあなたのホームページを去る必要がありません。
ページ上の別の場所へリンクするサンプル
このサンプルは、ドキュメントの別の部分へジャンプするリンクを使用する方法をデモンストレーションします。
フレームから抜け出すリンクサンプル
このサンプルは、ホームページがフレームによって固定されている場合、リンクによってフレームから抜け出る方法をデモンストレーションします。
メールソフトを起動させるサンプル
このサンプルは、メールソフト（メールソフトがインストールされている必要があります）を起動させる方法をデモンストレーションします。
メールソフトを起動させるサンプル2
このサンプルは、より複雑なメールソフトの起動をデモンストレーションします。
リンク関連のHTMLタグ
| タグ | 説明 |
|---|---|
| <a> | アンカーを定義します |