HTML
アンカーとハイパーリンク
サーチ…
前書き
アンカータグは、別々のWebページをリンクするために一般的に使用されますが、目次内の単一のドキュメント内の異なる場所間をリンクする場合や、外部アプリケーションを起動する場合にも使用できます。このトピックでは、さまざまな役割におけるHTMLアンカータグの実装とアプリケーションについて説明します。
構文
<a href="URL or anchor">Link Text</a>
パラメーター
| パラメータ | 詳細 |
|---|---|
href | 宛先アドレスを指定します。絶対URLまたは相対URL、またはアンカーのnameにすることができます。絶対URLは、 http://example.com/のようなウェブサイトの完全なURLです。相対URLは、同じWebサイト内の別のディレクトリおよび/またはドキュメントを指しています。たとえば、 /about-us/はルートディレクトリ（ / ）内の "about-us"ディレクトリを指します。ドキュメントを明示的に指定せずに別のディレクトリを指定すると、通常、Webサーバーはそのディレクトリ内にドキュメント "index.html"を返します。 |
hreflang | href属性でリンクされているリソースの言語を指定します（これはこのリソースとともに存在する必要があります）。 HTML5ではBCP 47 、HTML 4 ではRFC 1766の言語値を使用します。 |
rel | 現在のドキュメントとリンクされているドキュメントとの関係を指定します。 HTML5では、値を仕様書で定義するか、Microformats wikiに登録 する必要があります 。 |
target | 新しいタブやウィンドウなど、リンクを開く場所を指定します。可能な値は、 _blank 、 _self 、 _parent 、 _top 、およびframename （廃止予定）。このような振る舞いを強制することは、ウェブサイト上のユーザーのコントロールに違反するため、お勧めしません。 |
title | リンクに関する追加情報を指定します。情報は、カーソルがリンク上を移動するとき、ツールヒントのテキストとして表示されることが最も多いです。この属性はリンクに限定されず、ほぼすべてのHTMLタグで使用できます。 |
download | ユーザーがハイパーリンクをクリックしたときにターゲットがダウンロードされるように指定します。属性の値は、ダウンロードしたファイルの名前になります。許可される値に制限はなく、ブラウザは自動的に正しいファイル拡張子を検出し、ファイル（.img、.pdfなど）に追加します。値を省略すると、元のファイル名が使用されます。 |
別のサイトへのリンク
これは基本的な使用である<a> （nchor要素）の要素：
<a href="http://example.com/">Link to example.com</a>
これは、 href （ハイパーテキスト参照）属性で指定されているURL http://example.com/のURLにアンカーテキスト "Link to example.com"を持つハイパーリンクを作成します。それは次のようになります：
このリンクが外部Webサイトにつながることを示すために、 externalリンクタイプを使用できます。
<a href="http://example.com/" rel="external">example site</a>
HTTP以外のプロトコルを使用するサイトにリンクすることができます。たとえば、FTPサイトにリンクするには、
<a href="ftp://example.com/">This could be a link to a FTP site</a>
この場合、このアンカータグは、ユーザーのブラウザがHTTP（Hypertext Transfer Protocol）ではなくFTP（File Transfer Protocol）を使用してexample.com接続するように要求している点が異なりexample.com 。
新しいタブ/ウィンドウでリンクを開く
<a href="example.com" target="_blank">Text Here</a>
target属性は、リンクを開く場所を指定します。これを_blankに設定すると、ブラウザーに新しいタブまたはウィンドウ（ユーザー設定ごと）で開くように指示します。
セキュリティ脆弱性警告！
使用する
target="_blank"オープニングサイトにへの部分的アクセスできますwindow.openerそのページが、その後アクセスして変更することができますJavaScriptを介してオブジェクトをwindow.opener.locationページのを、潜在的にサイトをマルウェアやフィッシングするユーザーをリダイレクトします。コントロールしていないページでこれを使用するときは、リンクに
rel="noopener"を追加して、window.openerオブジェクトがリクエストとともに送信されないようにします。現在のところ、Firefoxは
noopenerサポートしていませんので、最大の効果を得るにはrel="noopener noreferrer"を使用する必要があります。
アンカーへのリンク
アンカーは、HTMLページの特定のタグにジャンプするために使用できます。 <a>タグは、 id属性を持つ任意の要素を指すことができます。 IDの詳細については、 クラスとIDに関するドキュメントを参照してください。アンカーは主にページのサブセクションにジャンプするために使用され、ヘッダータグとともに使用されます。
多くのトピックでページ（ page1.html ）を作成したとします。
<h2>First topic</h2>
<p>Content about the first topic</p>
<h2>Second topic</h2>
<p>Content about the second topic</p>
複数のセクションを作成したら、ページの上部に特定のセクションへのクイックリンク（またはブックマーク）付きの目次を作成することができます。
トピックにid属性を指定した場合は、そのトピックにリンクすることができます
<h2 id="Topic1">First topic</h2>
<p>Content about the first topic</p>
<h2 id="Topic2">Second topic</h2>
<p>Content about the second topic</p>
これで目次にアンカーを使用できます：
<h1>Table of Contents</h1>
<a href='#Topic1'>Click to jump to the First Topic</a>
<a href='#Topic2'>Click to jump to the Second Topic</a>
これらのアンカーは、Webページ（ page1.html ）にも添付されています。したがって、ページとアンカー名を参照することで、あるページから別のページにリンクすることができます。
Remember, you can always <a href="page1.html#Topic1">look back in the First Topic</a> for supporting information.
JavaScriptを実行するリンク
単にjavascript:プロトコルを使用して、通常のリンクとして開くのではなく、JavaScriptとしてテキストを実行します。
<a href="javascript:myFunction();">Run Code</a>
onclick属性を使って同じことを達成することもできます：
<a href="#" onclick="myFunction(); return false;">Run Code</a>
return false; #へのリンクがクリックされたときにページが上にスクロールしないようにする必要があります。その前に実行したいすべてのコードを必ず含めてください。戻り値はさらなるコードの実行を止めるでしょう。
また注目すべきは、感嘆符を含めることができます!ページが上にスクロールするのを防ぐためにハッシュタグの後にこれは、無効なスラッグがあれば 、それが参照する要素（ id="!"要素）を見つけることができなかったため、ページ上のどこでもスクロールしないリンクが発生するためです。無効なスラッグ（ #scrollsNowhereなど）を使用しても同じ効果を得ることができます。この場合、 return false;必須ではありません：
<a href="#!" onclick="myFunction();">Run Code</a>
あなたはこれを使うべきですか？
答えはノーほぼ確実です。このような要素でJavaScriptをインラインで実行することはかなり悪いことです。ページ内の要素を探し、代わりに関数をバインドする純粋なJavaScriptソリューションを使用することを検討してください。 イベントのリッスン
また、この要素がリンクではなくボタンであるかどうかを検討してください 。その場合は、
<button>を使用する必要があります。
同じサイトのページにリンクする
相対パスを使用して、同じWebサイトのページにリンクすることができます。
<a href="/example">Text Here</a>
上記の例では、サーバーのルートディレクトリ（ / ）にあるファイルのexampleれます。
このリンクがhttp://example.comにある場合、次の2つのリンクがユーザーを同じ場所に移動させます
<a href="/page">Text Here</a>
<a href="http://example.com/page">Text Here</a>
上記の両方は、 example.comルートディレクトリにあるpageファイルに移動しexample.com 。
電子メールクライアントを実行するリンク
基本的な使用法
href属性の値がmailto:始まる場合、それはクリック時に電子メールクライアントを開こうとします：
<a href="mailto:[email protected]">Send email</a>
これにより、電子メールアドレス[email protected]が新しく作成された電子メールの受信者になります。
CCとBCC
ccまたはbcc-recipientsのアドレスを追加するには、次の構文を使用します。
<a href="mailto:[email protected][email protected]&[email protected]">Send email</a>
件名と本文
新着メールの件名と本文を入力することもできます：
<a href="mailto:[email protected]?subject=Example+subject&body=Message+text">Send email</a>
これらの値はURLエンコードされている必要があります 。
mailto:を使用してリンクをクリックすると、オペレーティングシステムで指定されているデフォルトの電子メールクライアントを開くか、使用するクライアントを選択するように求められます。受信者のアドレスの後に指定されたすべてのオプションがすべての電子メールクライアントでサポートされているわけではありません。
番号をダイヤルするリンク
href属性の値がtel:で始まる場合、デバイスは、クリックすると番号をダイヤルします。これは、モバイルデバイスやSkypeやFaceTimeなどのソフトウェアを実行しているコンピュータ/タブレットで動作し、電話をかけることができます。
<a href="tel:11234567890">Call us</a>
ほとんどのデバイスとプログラムは、ダイヤルしようとしている番号を何らかの形で確認するようにユーザーに促します。