English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTMLはネットワーク上の別のドキュメントと超リンクを結びつけます。ほぼすべてのウェブページでリンクを見つけることができます。リンクをクリックすると、一つのページから別のページに移動できます。
HTMLハイパーリンク HTMLドキュメントでハイパーリンクを作成する方法について説明します。
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基础教程(oldtoolbag.com)</title> </head> <body> <p> <a href="/index.html">本文本</a>はこのウェブサイトのページへのリンクです。</p> <p><a href="https://www.baidu.com/">百度</a>はウェブ上のページへのリンクです。</p> </body> </html>テストをしてみてください ‹/›
HTMLはタグ<a>を使用してハイパーテキストリンクを設定します。
ハイパーリンクは一文字、一つの単語、または一連の単語、または画像でもできます。これらをクリックして新しいドキュメントまたは現在のドキュメントの一部に移動できます。
マウスカーソルをウェブページのリンクに移動すると、矢印が小さな手に変わります。
タグ<a>でhref属性を使用してリンクのアドレスを説明しています。
デフォルトでは、リンクは以下の形式でブラウザに表示されます：
未アクセスのリンクは青色のフォントで下線が付いた状態で表示されます。
アクセスしたリンクは紫色で下線が付いた状態で表示されます。
リンクをクリックすると、リンクは赤色で下線が付いた状態で表示されます。
注意：これらのハイパーリンクにCSSスタイルが設定されている場合、表示スタイルはCSSの設定に従って表示されます。
リンクのHTMLコードは非常にシンプルです。例えば、このようにです：
<a href="https://ja.oldtoolbag.com">基本チュートリアルウェブサイト</a>
href属性はリンクのターゲットを説明します。
<a href="https://ja.oldtoolbag.com/">基本チュートリアルウェブサイトにアクセス</a>
上記のコードは次のように表示されます：基本チュートリアルにアクセス
このハイパーリンクをクリックすると、ユーザーが基本チュートリアルのホームページに移動します。
ヒント: 「リンクテキスト」は必ずしもテキストではありません。画像や他のHTML要素もリンクとして使用できます。
target属性を使用して、リンクされたドキュメントがどこに表示されるかを定義できます。
以下の行は新しいウィンドウでドキュメントを開きます：
<a href="https://ja.oldtoolbag.com/" target="_blank">基本チュートリアルにアクセス!/a>テストをしてみてください ‹/›
id属性は、HTMLドキュメント内のブックマークタグを作成するために使用できます。
ヒント: ブックマークは特別な方法で表示されず、HTMLドキュメントでは表示されません。したがって、読者にとっては非表示です。
HTMLドキュメントにIDをインサートします：
<a id="tips">役立つヒント部分</a>
HTMLドキュメントに「役立つヒント部分(id="tips"）」にリンクを作成します：
<a href="#tips">役立つヒント部分にアクセス</a>
または、別のページから「役立つヒント部分(id="tips"）」にリンクを作成します：
<a href="https://ja.oldtoolbag.com/html/html-links.html#tips"> 役立つヒント部分にアクセス</a>
注：常に子フォルダーに正斜杠を追加してください。リンクを次のように書く場合：href="https://ja.oldtoolbag.com/html"とすると、サーバーに2回のHTTPリクエストが生成されます。なぜなら、サーバーはこのアドレスに正斜杠を追加し、新しいリクエストを作成するからです。例えば、href="https://ja.oldtoolbag.com/html/"。
画像リンク この例では、画像リンクの使用方法を示します。
現在のページに指定された場所にリンクを張ります。 この例では、ブックマークの使用方法を示します。
フレームから抜ける この例では、ページがフレーム内に固定されている場合にフレームから抜ける方法を示します。
電子メールリンクを作成する この例では、メールにリンクする方法を示します。（この例はメールクライアントプログラムをインストールした後に動作します。）
電子メールリンクを作成する 2 このサンプルでは、より複雑なメールリンクを示します。
| タグ | 説明 |
| <a> | ハイパーリンクを定義する |