HTML リンク

HTMLリンク（アンカー）は、ウェブページ間の移動の中核となる部分です。

HTMLはリンクを使用して、ネットワーク上の別のドキュメントと接続します。

HTMLのリンクは、異なるウェブページ間を移動するための要素です。

リンクは通常、あるウェブページを別のウェブページやリソース（ドキュメント、画像、音声ファイルなど）と関連付けるために使用されます。

リンクにより、ユーザーはウェブページを閲覧中にテキストや画像をクリックして他の場所へジャンプでき、ウェブページ間の相互接続を実現します。

HTMLリンクは<a>`<a>`タグで作成され、通常はユーザーをあるページから別のページへ移動させ、ある部分からページ内の別の部分へジャンプさせ、ファイルをダウンロードし、電子メールアプリケーションを開いたり、JavaScript関数を実行したりするために使用されます。

基本構文

<a href="URL.html">链接文本</a>
  • <a>`<a>`タグ：ハイパーリンク（アンカー）を定義します。これは、HTMLでクリック可能なリンクを作成するための主要なタグです。
  • hrefhref属性：リンク先URLを指定します。リンクをクリックすると、ブラウザはこのURLに移動します。

次の例は、HTMLドキュメントでリンクを作成する方法を示しています。

例

<a href="/index.html">このテキスト</a>は、このウェブサイト内のページへのリンクです。</p>

<p><a href="https://www.microsoft.com/">このテキスト</a>は、ワールドワイドウェブ上のページへのリンクです。</p>

試してみる »

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

HTMLは`<a>`タグを使用して<a>ハイパーテキストリンクを設定します。

ハイパーリンクは、1文字、1語、または語のグループでも、画像でもかまいません。これらのコンテンツをクリックして、新しいドキュメントまたは現在のドキュメント内の特定の部分にジャンプできます。

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

`<a>`タグ内では、<a>href属性を使用して、hrefリンクのアドレスを記述します。

デフォルトでは、リンクはブラウザ内で次のように表示されます。

  • 未訪問のリンクは青い文字で下線付きで表示されます。
  • 訪問済みのリンクは紫色で下線付きで表示されます。
  • リンクをクリックすると、リンクは赤色で下線付きで表示されます。

注意：これらのハイパーリンクにCSSスタイルが設定されている場合、表示スタイルはCSSの設定に従って表示されます。

HTMLリンク属性

href属性はリンクのリンク先を記述します。

1、href：リンク先を定義します。

これはハイパーリンクで最も重要な属性で、リンクの宛先を指定します。別のウェブページ、ファイル、メール、電話番号、またはJavaScriptにすることができます。

例

<a href="https://www.example.com">Example にアクセス</a>

2、target：リンクの開き方を定義します。

  • _blank`_blank`：新しいウィンドウまたは新しいタブでリンクを開きます。
  • _self`_self`：現在のウィンドウまたはタブでリンクを開きます（デフォルト）。
  • _parent`_parent`：親フレームでリンクを開きます。
  • _top`_top`：フレームをすべて解除し、ウィンドウ全体でリンクを開きます。

例

<a href="https://www.example.com" target="_blank" rel="noopener">新しいウィンドウで Example を開く</a>

3、rel：リンクとリンク先ページの関係を定義します。

nofollownofollow：検索エンジンがこのリンクを追跡すべきではないことを示します。外部リンクでよく使用されます。

noopenerとnoreferrernoopener：新しいタブでリンクを開く際のセキュリティ問題を防ぎます。特にtarget="_blank"`_blank` を使用する場合に有効です。

  • noopenernoopener：新しいブラウジングコンテキスト（ページ）がwindow.openeropenerプロパティとopenwindow.openerメソッドにアクセスするのを防ぎます。
  • noreferrernoreferrer：Refererヘッダーを送信しません（つまり、どのサイトから来たかを相手サイトに知らせません）。
  • noopener noreferrernoopener noreferrer：同時に使用します。noopenerとnoreferrer例：<a href="https://www.example.com" rel="noopener noreferrer">安全链接</a>

例

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">安全なリンク</a>

4、download：リンク先へ移動する代わりに、ブラウザにリンク先のダウンロードを促します。

ファイル名を指定すると、ブラウザは指定されたファイル名でダウンロードして保存するように求めます。

例：

例

<a href="file.pdf" download="example.pdf">ファイルをダウンロード</a>

5、title：リンクの追加情報を定義します。マウスをリンク上に置いたときに表示されるツールチップです。

例

<a href="https://www.example.com" title="Example サイトにアクセス">Example にアクセス</a>

6、id：リンクアンカーに使用され、通常は同じページ内の特定の位置にジャンプします。

例

<!-- ページ内の特定のセクションにリンク -->
<a href="#section1">パート1へジャンプ</a>
<div id="section1">これはパート1です</div>

7、hreflang：リンク先URLの言語を指定します。

例

<a href="https://www.example.com/es" hreflang="es">スペイン語のウェブサイトにアクセス</a>

8、type：リンクリソースのMIMEタイプを指定します。

例

<a href="style.css" type="text/css">スタイルシート</a>

9、class：要素のクラス名を指定します（CSSで定義）。

例

<a href="https://www.example.com" class="external-link">外部リンク</a>

10、style：要素上に直接CSSスタイルを定義します。

例

<a href="https://www.example.com" style="color: red;">赤いリンク</a>

例

<a href="../index.html">访问サンプル</a>

上記のコード行は次のように表示されます：サンプルにアクセス

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

ヒント： 「リンクテキスト」必ずしもテキストである必要はありません。画像や他のHTML要素もリンクにできます。

テキストリンク：最も一般的なリンクの種類はテキストリンクです。`<a>` 要素を使用してテキストをクリック可能なリンクに変換します。例：

<a href="https://www.example.com">访问示例网站</a>

画像リンク：画像をリンクとして使用することもできます。この場合、`<a>` 要素が `<img>` 要素を囲みます。例：

<a href="https://www.example.com">
  <img src="example.jpg.html" alt="示例图片">
</a>

アンカーリンク：他のウェブページへのリンクに加えて、同じページ内に内部リンクを作成することもできます。これをアンカーリンクと呼びます。アンカーリンクを作成するには、ターゲット位置で `<a>` 要素を使用してマーカーを定義し、`#` 記号でそのマーカーを参照する必要があります。例：

<a href="../index.html">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>

ダウンロードリンク：リンクを別のウェブページへの移動ではなくファイルのダウンロードに使用したい場合は、download 属性を使用できます。例：

<a href="document.pdf.html" download>下载文档</a>

HTMLリンク - target属性

target 属性を使用すると、リンク先のドキュメントを表示する場所を定義できます。

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

例

<a href="https://www.example.com/" target="_blank" rel="noopener noreferrer">サンプルにアクセス！</a>

試してみる »

HTMLリンク - id属性

id属性はHTMLドキュメントのブックマークを作成するために使用できます。

ヒント：ブックマークは特別な方法では表示されません。つまり、HTMLページ内には表示されないため、読者には見えません。

例

HTMLドキュメントにIDを挿入する：

<a id="tips">有用的提示部分</a>

HTMLドキュメント内に「役立つヒントのセクション（id="tips"）」へのリンクを作成する：

<a href="../index.html">访问有用的提示部分</a>

または、別のページから「役立つヒントのセクション（id="tips"）」へのリンクを作成する：

<a href="../html/html-links.html">
访问有用的提示部分</a>

空リンク

空リンクを設定する一般的な方法と、それらの違いは次のとおりです。

方法機能リダイレクトするかどうかシナリオ適用性
href="../index.html"ページ先頭へ移動であるプレースホルダー、クリックイベントをキャプチャ
href="#"デフォルトの動作を防ぎ、ページをリフレッシュしない否リダイレクトを防ぎ、JSと併用
href=""現在のページをリフレッシュであるページのリフレッシュが必要な場合
href="blank.html"空白ページを開くである新しいウィンドウで空白ページを開く
role="button"リンクがボタンとして表示され、デフォルトの動作なし否JSと併用してボタン機能を実装、リダイレクトなし

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

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

Examples

その他の例

画像リンク
画像リンクの使用方法。

現在のページ内の指定位置へのリンク
ブックマークの使用方法

フレームから抜け出す
この例では、ページがフレーム内に固定されている場合に、フレームから抜け出す方法を示します。

電子メールリンクの作成
この例では、メールへのリンク方法を示します。（この例はメールクライアントプログラムがインストールされている場合にのみ機能します。）

電子メールリンクの作成 2
この例では、より複雑なメールリンクを示します。

HTMLリンクタグ

タグ説明
<a>ハイパーリンクを定義する
その他の拡張