HTML/ハイパーリンク
ハイパーリンクとは、部分テキストや要素に他のページなどへの参照関係をもたせること。 参照とは、対象をクリック（またはタップあるいキーボードによりアクティブ化するなど）でリンク先へ閲覧対象を遷移する機能。 この参照関係をハイパーリンクあるいは単にリンクと呼ぶ。ハイパーリンクで参照関係を作ることをリンクを張るという。 Microsoft Edge や Google Chrome など主要なウェブブラウザではリンクを張ったテキストは青い文字にアンダーラインをつけて表示される。 この表現は、スタイルシートで変更できる。 リンクを張るにはhref属性を伴ったA要素（Anchorの略）使う。
基本形[編集]
<a href="リンク先のURL">表示させたいURLまたはテキスト</a>
A要素で囲まれたテキストを選択すると指定されたリンク先へ移動できる。テキストはリンク先の内容が何であるかを示す内容であるのが望ましく「ここ」や「これ」などの指示代名詞を使うことは避けたほうがよい。 なお、リンク先のURLに国際化ドメイン名やパーセントエンコーディングが必要な文字種を含めた場合、対応していないウェブブラウザでは製作者の意図したリンク先へと飛べない。
画像での例[編集]
<a href="リンク先のURL"><img src="表示させたい画像のURL" alt="代替テキスト"></a>
代替テキストは画像が表示できない環境下で画像の代わりにテキストとして表示されるものであるため、リンク先が何であるかを示す内容にすることが望ましい。画像にリンクを張った場合ウェブブラウザによっては画像の周りに枠が表示されるがスタイルシートで消すことも出来る（border属性は非推奨）。
ウェブページ以外へのリンク[編集]
ウェブブラウザが直接処理できないスキーム名やファイルタイプをリンク先に指定すると通常のリンクとは違う処理が行われ、ファイルの処理方法を確認する画面が出たり別のアプリケーションが自動的にファイルを受け取ってリンク先を開いたりする形での対処が行われる。
例：メールアドレス（mailtoスキーム）へのリンク
<a href="mailto:メールアドレス">表示させたいテキスト</a>
<a href="mailto:メールアドレス?subject=件名&body=本文">表示させたいテキスト</a>
mailto:メールアドレスと指定するとメールアドレスへリンクを貼ることが出来、リンクをクリックするとウェブブラウザ側で指定されたメールクライアントでそのアドレスへ宛てたメールを作成する画面が立ち上がる。
subject=でメールの件名をbody=でメールの本文を指定できるが、対応していないクライアントの存在も考慮しよう。
ターゲット指定[編集]
<a href="リンク先のURL" target="ターゲット">表示させたいURLまたはテキスト</a>
target属性を指定することでリンク先の開き方を設定できる。ただし強制的に新しいウィンドウを開くやり方はリンク先を同じウィンドウで開きたいユーザーにとって迷惑であり、全画面表示や音声ウェブブラウザの利用者を困惑させることもあるため積極的な利用は避けるべきである（これはPCがクライアントの主流であった時代の認識で、モバイルクライアントにおいては「別タブで開く」には長押しなど煩雑な操作が必要なので「現在のタブに開く」か「別タブで開く」方が好ましいかをコンテンツ製作者は熟慮する必要がある）。
| ターゲット名 | 概要 |
|---|---|
| _blank | 新しいウィンドウまたはタブでページを開く |
| _top | フレーム内のページからリンクしたとき、フレームをすべて解除してページをウィンドウ全体に開く |
| _self | フレーム内のページからリンクしたとき、リンク先ページをリンク元と同じフレームに開く |
| _parent | フレーム内のページからリンクしたとき、リンク先ページをフレームを一段階解除してリンク元のフレームに開く |
| 任意名 | 1回目は新しいウィンドウまたはタブで開かれるが、そのページを開いたまま同じターゲットのページを開くとすでに同じ名前で開かれたウィンドウまたはタブが上書きされる。フレームの場合、指定されたtargetと同じname属性を付与されたフレームがあればそのフレームを上書きしてリンク先を開く。 |
ラベル[編集]
<a name="任意のラベル名">ラベルを貼るテキスト</a>
A要素にname属性を指定するとそのページ内のその場所にラベルを指定することができる。ラベルを指定しておくとそのテキストや画像がある位置までジャンプできるようになる。これにより途中の内容を省略できるだけでなく、任意の場所にすばやく移動できるためページの内容が長い場合などに便利である（HTML5ではA要素のname属性は Obsolate とされている）。
<a href="#ラベル名">リンクを貼るテキスト</a>
<a href="リンク先#ラベル名">リンクを貼るテキスト</a>
ページ内でラベルを貼った位置に移動したい場合はA要素のhref属性に#ラベル名という属性値を指定する。また、他のページ内にあるラベルへ移動したい場合はリンク先#ラベル名のように指定する。なお、ラベル名にパーセントエンコーディングが必要な文字列を指定するとウェブブラウザによっては正しく機能しなくなるケースがあるので、必ずパーセントエンコーディングが必要ない文字列で記述するようにしよう（この項目のURL自体がパーセントエンコーディングが必要ない文字列になっていることから判るように、これは相当過去の認識）。
id属性を使ったラベルの指定[編集]
<span id="任意の名前">ラベルを貼るテキスト</span>
ラベルはid属性を使って指定することも出来る。id属性を使う場合必ずしもA要素に対して記述する必要は無くA要素以外の要素へ指定した場合でもラベルとして機能する。 むしろA要素をリンク先のラベルとして使う用法は例外的で、リンクを意味するA要素と紛らわしいのでid属性を使ったアンカーを使うことが望ましい。
<a name="任意の名前" id="任意の名前">ラベルを貼るテキスト</a>
id属性は古いウェブブラウザが解釈できないため、A要素にnameとidの両方を指定する方法もある。この場合name属性とid属性には同じ値を指定する。
絶対パスと相対パスと絶対URL[編集]
絶対パスとは目的とするアドレスをルートディレクトリを基準として表す方法であり、相対パスとは現在表示しているページのアドレスなど特定のディレクトリを基準としてリンク先ファイルまでの相対的な位置関係を示す。絶対URLとはhttps://～から記述して表す方法である。外部のサーバーに対するリンクでは絶対URLを使用しなければならない[1]。同じサーバー内のリンクに対しては相対パスと絶対パス、絶対URLのどれでも使用することが可能である。
例えば同じディレクトリ内にあるファイルを絶対パスや絶対URLでリンクさせた場合ディレクトリを移動したりディレクトリ名を変更するとリンクが機能しなくなるが、ここで相対パスを使用していた場合ファイルの位置関係が変わっていなければディレクトリに変更が加わってもリンクはそのまま機能し続ける。
<a href="メインページ">相対パス</a>
<a href="/wiki/メインページ">絶対パス</a>
<a href="https://ja.wikibooks.org/wiki/メインページ">絶対URL</a>
- ^ ただし、 //ja.wikibooks.org/wiki/メインページ の様に scheme を欠いたアドレスも有効で、http と https の過渡期の頃によく使われました。