a タグエレメント
a タグエレメントは、ハイパーリンク(リンク)を作成する HTML タグエレメントです。リンクを辿ることで他のページやページ内の任意の箇所に移動できます。
<a href="example_page.html">他のページにリンク</a>
詳しくは 動作の確認 を参照してください
a タグエレメントはアンカー( anchor )の略称で、アンカーリンク、ハイパーリンク、リンク、リンクタグなどと呼ばれています。
リンク先にメールアドレスを設定するとメール送信を、ファイルを設定するとダウンロードを行います。
CSS の color や text-decoration プロパティでリンクの色や下線を変更することができます。
JavaScript で遷移を無効にすることや遷移先を替えることもできます。無効にするには href="javascript:void(0);"
と属性を指定します。
ただし、バブル機能はそのまま機能します。
a タグエレメントと JavaScript や CSS についてはその他
を参照してください。
ページ内 Index
a タグエレメントについて
ページ内リンク
ハッシュ#
をつけるとページ内リンクです。
以下のようなリンクに加えて、#
の移動先のエレメントに id 属性を設定しておきます。
移動先の id には#
は付けません。
<a href="#EXAMPLE">ページ内のリンク</a> <section id="EXAMPLE">ページ内のリンク</section>
ページ内リンクと他のページへのリンクは組み合わせることができます。組み合わせるとそのページの#
で指定した位置に移動します。
<a href="example_page.html#EXAMPLE">他のページの指定位置へのリンク</a>
絶対指定と相対指定
URLには、絶対指定と相対指定が使えます。
絶対指定は、https://example.net/
といったドメイン名から指定するような指定方法です。
他のサイトへの指定に使用されます。自サイト内では <base> に使用される場合があるでしょう。自サイト内では多くの場合、相対指定のリンクを使用します。
<a href="https://www.smpl-rfrns.net/HTML/a.html">URLの絶対指定</a>
相対指定は、リンクのあるページからの位置になります。
そのファイルと同じディレクトリ内のファイルやディレクトリを指定するには./
、ひとつ上のディレクトリは../
といった指定です。
<a href="example.html">URLの相対指定</a>
例えば上記の例は、このページと同じディレクトリ内の example.html へのリンクです。こちらの指定方法がよく使われると思います。
その他
CSS、styleについて
<a> エレメント、リンクテキスト特有の下線の消し方や色、カーソルがのったとき、訪問済みリンクの装飾をCSS、styleで変更することができます。
例えば a タグエレメントの文字色を黒、下線を非表示に、ポインターが来たら指定の色で下線を表示するには以下のようにします。
a { color: black; text-decoration: none; } a:hover { color: #0000ee; text-decoration: underline; }
詳しくは、リンク <a> とスタイル
を参照してください。
外部リンクへの配慮
検索ロボットにフォローしてほしくない外部リンクやサイト内リンクは rel 属性に nofollow を指定します。
<a href="example.html" rel="nofollow">フォローを無効にしたリンク</a>
nofollow に指定することで検索ロボットはそのリンクを辿らないようにします。
JavaScript
JavaScript で <a> エレメンを利用する場合は、 HTMLAnchorElement インターフェイスも参照するとよいでしょう。
遷移を無効に
JavaScript で遷移を無効にすることができます。
<a href="javascript:void(0);">このリンクは遷移が無効になります。<a>
ただし、バブリングは機能します。onclick="event.stopPropagation();" や onclick="event.stopImmediatePropagation();" を使用する必要があるかもしれません。
バブリングについてはバブリング・キャプチャリングについて
を参照してください。
JavaScript コード中から遷移
JavaScript によるURLの遷移は、Window オブジェクトのプロパティまたはメソッドを利用します。
.location プロパティによる移動は href に値を指定することでその URL に遷移します。
window.location.href = 'URL';
open() メソッドで開くウィンドウを指定して URL に遷移をすることもできます。
window.open('URL', '_blank');