a hrefダグ/リンクの挿入

<a href>タグはハイパーリンクを示します。

説明

 <a href>タグを使ってハイパーリンクを挿入すると、リンクをクリックした際にリンク先のページに移動するようになります。

リンクの利用例

 ページの途中に移動させる事も出来ます。

 又、標準では同じウィンドウに表示されますが、別ウィンドウや別タブに表示させる事も出来ます。

構文

 <a href>タグはHTMLボディー内に記述します。構文は以下の通りです。

<a href="URL、ファイル名等#id名" target="_blank">リンク先名</a>

 赤字と緑で囲まれた部分はURL、ファイル名等かid名どちらか、又は両方が必須です。URLやファイル名だけ指定すると指定したURLやファイルが表示されます。

 id名を指定すると見ているページの中でidで指定した場所に移動します。URLやファイル名とid名両方を指定すると、指定したURLやファイルでidで指定したページの途中に移動します。

リンク先にidを指定した例

 青字で囲まれたtargetは必須ではありません。標準ではリンク先はブラウザの同じウィンドウに表示されますが、target="_blank"を指定すると別ウィンドウや別タブで表示されます。

利用例

 ファイルを指定した利用例は以下の通りです。

<a href="index.html">トップページ</a>

 上記ではindex.htmlファイルが表示されます。異なるディレクトリのファイルを指定する時はtag/index.htmlとするとtagディレクトリ配下のindex.htmlファイル、../index.htmlとすると1つ上のディレクトリのindex.htmlファイルが表示されます。

 以下はURLを指定した場合です。

<a href="http://example.com">Aサイト</a>

 http://を最初に付ける事でURLと認識されます。

ページの途中に移動

 同じページのid指定した箇所に移動させるには以下のように記述します。

<a href="#test">このページのトップ</a>

 上記では同じページ内のidをtestと指定した箇所が表示されます。idとは、例えば<div id="test">等、タグにidをオプションとして付けている場所です。このため、同じページで同じidを2箇所以上で使えません。

 以下が表示例です。

このページのトップ

 上記をクリックするとページのトップに移動します。

 異なるページの途中に移動させるにはファイル名やURLも合わせて指定が必要です。例えば、以下ではindex.htmlファイルのidをtestと指定したページの途中に移動します。

<a href="index.html#test">トップページ</a>

別ウィンドウ、又は別タブで表示

 ブラウザの別ウィンドウ、又は別タブでリンク先を表示するには以下のように記述します。

<a href="index.html" target="_blank">ページのトップが別タブで表示</a>

 以下が表示例です。

ページのトップが別タブで表示

 上記をクリックすると、このページが別ウィンドウ、又は別タブで表示されます。

ディスプレイ

 <a href>タグで囲むとインラインボックスを示すため、改行されません。

 このため、文章の途中にハイパーリンクを入れる事が出来ます。

関連ページ

・ホームページ作成「リンクの挿入

 単純なリンクの挿入方法からCSSを利用したカーソルを乗せると変化する方法、別ウィンドウやタブでの表示方法、ページの途中にリンクする方法等を説明しています。

検索付「HTMLタグ早見表」に戻る

スマホ向け「HTMLタグ一覧」に戻る

  • このエントリーをはてなブックマークに追加