HTML リンク

HTMLは、ネットワーク上の別のドキュメントとリンクを結びつけるために使用されます。

ほぼすべてのウェブページでリンクを見つけることができます。リンクをクリックすると、一つのページから別のページにジャンプできます。

例

超级リンクの作成
この例では、HTMLドキュメント内にリンクを作成する方法を示します。
画像を使用してリンクを作成する
この例では、画像を使用してリンクを作成する方法を示します。

(詳細な例は、ページの下部に見つけることができます。)

HTMLハイパーリンク（リンク）

ハイパーリンクは一文字、一語、または複数の語、または画像で構成できます。これらをクリックすると、新しいドキュメントまたは現在のドキュメントの特定の部分にジャンプします。

ウェブページ内のリンクにマウス指標を合わせると、矢印が小さな手に変わります。

HTML内でリンクを作成するために<a>タグを使用します。

<a>タグの使用方法には二種類あります：

  1. href属性を使用して - 他のドキュメントへのリンクを作成
  2. name属性を使用して - ドキュメント内のブックマークを作成

関連リンク：超テキストとは何ですか？

HTMLリンク構文

リンクのHTMLコードは非常にシンプルです。以下のようになります：

<a href="url">リンクテキスト</a>

href属性はリンクのターゲットを指定します。

開始タグと終了タグの間のテキストは、ハイパーリンクとして表示されます。

例

<a href="http://www.codew3c.com/">訪問 CodeW3C.com</a>

上記のコードは以下のように表示されます：Visit CodeW3C.com

このハイパーリンクをクリックすると、ユーザーがCodeW3C.comのホームページに移動します。

ヒント："リンクテキスト"はテキストでなくても構いません。画像や他のHTML要素もリンクにできます。

HTMLリンク - target属性

Target属性を使用すると、リンクされたドキュメントがどこで表示されるかを定義できます。

以下の行は新しいウィンドウでドキュメントを開きます：

<a href="http://www.codew3c.com/" target="_blank">Visit CodeW3C.com!</a>

実際に試してみてください

HTMLリンク - name属性

name属性はアンカー（anchor）の名前を指定します。

name属性を使用して、HTMLページ内のブックマークを作成できます。

ブックマークは特別な方法で表示されず、読者には見えません。

名前付きアンカーを使用する場合、ページ内の特定のセクションに直接ジャンプするリンクを作成できます。これにより、ユーザーは必要な情報を探すためにページをずっとスクロールする必要がなくなります。

名前付きアンカーの構文：

<a name="label">アンカー（ページ上に表示されるテキスト）</a>

ヒント：アンカーの名前は好きな名前にできます。

ヒント：name属性の代わりにid属性を使用することもできますが、アンカーの名前付けも有効です。

例

まず、HTMLドキュメントでアンカーに名前をつけます（ブックマークを作成します）：

<a name="tips">基本的な注意事項 - 有用なヒント</a>

次に、同じドキュメント内でこのアンカーへのリンクを作成します：

<a href="#tips">役立つヒント</a>

他にも、他のページでこのアンカーへのリンクを作成できます：

<a href="http://www.codew3c.com/html/html_links.asp#tips"">有益なヒント</a>

上記のコードでは、#シンボルとアンchor名をURLの末尾に追加することで、tipsというネームアンchorに直接リンクすることができます。

具体的な効果：有益なヒント

基本的な注意事項 - 有益なヒント：

注釈：常に正斜杠を子フォルダーに追加してください。このようにリンクを書くと：href="http://www.codew3c.com/html"、サーバーはこのアドレスに正斜杠を追加し、新しいリクエストを作成します：href="http://www.codew3c.com/html/"、そのため、サーバーはこのリンクに対して2回のHTTPリクエストを生成します。

ヒント：ネームアンchorは、大きなドキュメントの先頭に目次を作成するためによく使用されます。各章にネームアンchorを割り当て、それらのアンchorにリンクするリンクをドキュメントの上部に配置します。百度百科を頻繁に訪れると、ほとんどの条項がこのようなナビゲーション方法を使用していることに気づくでしょう。

ヒント：ブラウザが定義されたネームアンchorを見つけられない場合、ドキュメントの先頭に定位します。エラーは発生しません。

さらに多くの例

新しいブラウザウィンドウでリンクを開く
新しいブラウザウィンドウでページを開く方法を示しています。これにより、訪問者はあなたのサイトを離れる必要はありません。
同じページの異なる場所にリンクする
この例では、ドキュメントの別の部分にリンクする方法を示しています。
フレームから抜け出す
この例では、フレーム内に固定されたページがあれば、フレームから抜け出す方法を示しています。
メールリンクを作成
この例では、メールにリンクする方法を示しています。（この例はメールクライアントプログラムをインストールした後にのみ動作します。）
メールリンクを作成 2
この例では、より複雑なメールリンクを示しています。

HTML リンクタグ

タグ 説明
<a> アンchor を定義します。