HTMLリンク

HTML CSS HTML画像

HTMLでは、ウェブ上の別の文書に接続するためにハイパーリンクを使用します。

ほぼすべてのページにリンクがあります。 リンクをクリックすると、あるページから別のページにジャンプします。

ハイパーリンクを作成する
この例では、HTML文書にリンクを作成する方法を説明します。
画像をリンクとして使用する
この例では、画像をリンクとして使用する方法を説明します。

HTML ハイパーリンク (リンク)

ハイパーリンクには、単語、単語、単語のグループ、または画像を指定できます。これらのコンテンツをクリックすると、新しいドキュメントまたは現在のドキュメントの特定の部分にジャンプできます。

Web ページ上のリンク上にマウス ポインタを移動すると、矢印が小さな手に変わります。

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

<a> タグを使用するには 2 つの方法があります:

  1. href 属性を使用して別のドキュメントへのリンクを作成する
  2. name 属性を使用して、ドキュメント内にブックマークを作成します

HTML リンク構文

リンクの HTML コードは単純です。 次のようになります:

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

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

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

<a href="https://w3cstudy.cc/">Visit W3School</a>

上記のコード行は次のようになります:Visit W3School

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

ヒント: "リンク テキスト"はテキストである必要はありません。 画像やその他の HTML 要素をリンクにすることができます。

HTML リンク - ターゲット属性

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

次の行により、ドキュメントが新しいウィンドウで開きます。

<a href="https://W3cstudycc/" target="_blank">W3cstudy にアクセスしてください!</ a>

自分で試してみる

HTML リンク - name 属性

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

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

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

名前付きアンカー (名前付きアンカー) を使用する場合、名前付きアンカー (ページ内のセクションなど) に直接ジャンプするリンクを作成できるため、ユーザーは必要な情報を見つけるためにページをスクロールし続ける必要がなくなります。 。

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

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

ヒント: アンカーの名前は任意の名前にすることができます。

ヒント: name 属性の代わりに id 属性を使用できます。名前付きアンカーも有効です。

まず、HTML ドキュメント内のアンカーに名前を付けます (ブックマークを作成します)。

<a name="tips">基本的な禁止事項 - 役立つヒント</a>

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

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

他のページでこのアンカーへのリンクを作成することもできます。

<a href="https://w3cstudy.cc/html/html_links.asp#tips">役立つヒント</a>< /pre >

上記のコードでは、# 記号とアンカー名を URL の末尾に追加し、名前付きアンカー ヒントに直接リンクできます。

具体的な結果: 役立つヒント

基本的な注意事項 - 役立つヒント:

注: サブフォルダには必ずスラッシュを追加してください。 href="https://w3cstudy.cc/html" のようにリンクを記述すると、サーバーに対して 2 つの HTTP リクエストが生成されます。 これは、サーバーがこのアドレスにスラッシュを追加して、href="https://w3cstudy.cc/html/" のような新しいリクエストを作成するためです。

ヒント: 名前付けアンカーは、大きなドキュメントの先頭に目次を作成するためによく使用されます。 各セクションに名前付きアンカーを付けて、それらのアンカーへのリンクを文書の上部に置くことができます。 Baidu Encyclopedia に頻繁にアクセスすると、ほぼすべてのエントリでこのナビゲーション方法が使用されていることがわかります。

ヒント: ブラウザは、定義された名前付きアンカーを見つけることができない場合、ドキュメントの先頭に移動します。 エラーは発生しません。

HTML リンクタグ

ラベル 説明
<a> はアンカーを定義します。