HTMLリンク
リンクはほぼすべてのWebページにあります。リンクを使用すると、ユーザーはページ間を移動できます。
HTMLリンク-ハイパーリンク
HTMLリンクはハイパーリンクです。
リンクをクリックして、別のドキュメントにジャンプできます。
リンク上でマウスを動かすと、マウスの矢印が小さな手に変わります。
注：リンクはテキストである必要はありません。リンクは画像またはその他のHTML要素にすることができます。
HTMLリンク-構文
HTML<a>タグはハイパーリンクを定義します。構文は次のとおりです。
<a href="url">link text</a>
要素の最も重要な属性は、リンクの宛先を示す属性です。<a>
href
リンクテキストは、読者に表示される部分です。
リンクテキストをクリックすると、指定されたURLアドレスにリーダーが送信されます。
例
この例は、W3Schools.comへのリンクを作成する方法を示しています。
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
デフォルトでは、リンクはすべてのブラウザで次のように表示されます。
- 未訪問のリンクには下線が引かれ、青色になっています
- 訪問したリンクには下線が引かれ、紫色になっています
- アクティブなリンクには下線が引かれ、赤で表示されます
ヒント：もちろん、リンクはCSSでスタイル設定して、別の外観にすることができます。
HTMLリンク-ターゲット属性
デフォルトでは、リンクされたページは現在のブラウザウィンドウに表示されます。これを変更するには、リンクの別のターゲットを指定する必要があります。
このtarget属性は、リンクされたドキュメントを開く場所を指定します。
属性には、次のいずれかのtarget値を指定できます。
_self- ディフォルト。クリックしたときと同じウィンドウ/タブでドキュメントを開きます_blank-新しいウィンドウまたはタブでドキュメントを開きます_parent-親フレームでドキュメントを開きます_top-ウィンドウ全体でドキュメントを開きます
例
target = "_ blank"を使用して、リンクされたドキュメントを新しいブラウザウィンドウまたはタブで開きます。
<a href="https://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
絶対URLと相対URL
上記の両方の例では、属性に絶対URL（完全なWebアドレス）を使用していhrefます。
ローカルリンク（同じWebサイト内のページへのリンク）は、 相対URL（「https：// www」の部分なし）で指定されます。
例
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative
URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS
Tutorial</a></p>
HTMLリンク-画像をリンクとして使用する
画像をリンクとして使用するには、<img>
タグをタグ内に配置するだけ<a>です。
例
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
メールアドレスへのリンク
mailto:属性内で使用
hrefして、ユーザーの電子メールプログラムを開くリンクを作成します（ユーザーが新しい電子メールを送信できるようにするため）。
例
<a href="mailto:[email protected]">Send email</a>
リンクとしてのボタン
HTMLボタンをリンクとして使用するには、JavaScriptコードを追加する必要があります。
JavaScriptを使用すると、ボタンのクリックなど、特定のイベントで何が発生するかを指定できます。
例
<button
onclick="document.location='default.asp'">HTML Tutorial</button>
ヒント： JavaScriptの詳細については、JavaScriptチュートリアルをご覧ください。
リンクタイトル
このtitle属性は、要素に関する追加情報を指定します。ほとんどの場合、情報は、マウスが要素上を移動したときにツールチップテキストとして表示されます。
例
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
絶対URLと相対URLの詳細
例
完全なURLを使用してWebページにリンクします。
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
例
現在のWebサイトのhtmlフォルダーにあるページへのリンク：
<a href="/html/default.asp">HTML tutorial</a>
例
現在のページと同じフォルダにあるページへのリンク：
<a href="default.asp">HTML tutorial</a>
ファイルパスの詳細については、「 HTMLファイルパス」の章を参照してください。
章のまとめ
- 要素を使用
<a>してリンクを定義します - 属性を使用
hrefしてリンクアドレスを定義します - この属性を使用
targetして、リンクされたドキュメントを開く場所を定義します <img>要素（内部）を使用<a>して、画像をリンクとして使用しますmailto:属性内のスキームを使用してhref、ユーザーの電子メールプログラムを開くリンクを作成します
HTMLリンクタグ
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
利用可能なすべてのHTMLタグの完全なリストについては、HTMLタグリファレンスにアクセスしてください。