a タグエレメント
a タグエレメントは、ハイパーリンク（リンク）を作成する HTML タグエレメントです。リンクを辿ることで他のページやページ内の任意の箇所に移動できます。
<a href="example_page.html">他のページにリンク</a>
リンク先にメールアドレスを設定するとメール送信を、ファイルを設定するとダウンロードを行います。
JavaScript で遷移を無効にすることや遷移先を替えることもできます。無効にするには、"javascript:void(0)" です。
詳しくはその他 JavaScript
を参照してください。
- ad -
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> エレメントのCSS
を参照してください。
JavaScript
JavaScript で<a> エレメンを利用する場合は、 HTMLAnchorElement インターフェイスも参照するとよいでしょう。
遷移を無効に
JavaScript で遷移を無効にすることができます。
<a href="javascript:void(0);">このリンクは遷移が無効になります。<a>
JavaScript コード中から遷移
JavaScript によるURLの遷移は、Window オブジェクトのプロパティまたはメソッドを利用します。
.location プロパティによる移動は href に値を指定することでその URL に遷移します。
window.location.href = 'URL';
open() メソッドで開くウィンドウを指定して URL に遷移をすることもできます。
window.open('URL', '_blank');
- ad -