HTML リンク

aタグで別の文書へのリンクを設定することができます。
外部ページへのリンクを作れるだけでなく、同一ページ内のある箇所に移動する「ページ内リンク」や、クリックするとメールソフトが開くといった「メールリンク」なども作ることができます。

<a href="url">テキスト</a>

リンクしたい箇所をa要素で挟み、href属性を用いてリンク先を指定します。

使用例

これは一番シンプルな使い方です。そのページのURLをリンク先のパスに指定します。

 <a href="https://codinghaku.com/">CodingHakuのホームページへ</a>

同じフォルダ内にあるHTMLファイルにリンクする場合は、リンク先のパスに相手のファイル名を記述すればリンクできます。

 <a href="/tools/1.html">オンラインエディタ</a> は「tools」というフォルダにある。

オンラインエディタは「tools」というフォルダにある。

ブラウザからブックマークをインポートしたことはありますか。書き出されたHTMLファイルを開いてみてください。たくさんのaタグが使われています。

新しいウインドウまたはタブで表示したい場合は、a要素に、target属性というリンク先を表示する場所を指定する属性を用いて、属性値に “_blank” と指定します。

俺は<a href="https://codinghaku.com/" target="_blank">CodingHaku</a>でHTMLの勉強をしている。

俺はCodingHakuでHTMLの勉強をしている。

同じページ内の違う箇所にリンクすることも可能です。

その場合はまず、リンク先となる要素に、id属性で専用の名前を指定します。（任意の文字列を半角英数字）

<p id="ue">aタグで別の文書へのリンクを設定することができます。</p>

<a href="#ue">h1タグの下にあるpタグのところに飛ぶ</a>

そして、リンクを指定するa要素のhref属性に、「#」と記述します。後ろに先程指定した id属性の属性値を記述します。別のページの場合は「＃」の前にURLを入れればいいです。

この方法で目次を作ることができます。このページも使っています。

文章量が多くて縦方向に長いページでは、そのページの最上部に戻るためのページ内リンクを設けたいことがあります。

事前にid名を割り振っておく必要がありません。

<a href="#top">このページの最上部へ戻る</a>
<a href="#">このページの最上部へ戻る</a>

どちらの書き方でも、ページの最上部へ移動するページ内リンクになります。

id属性値に「top」が指定されている要素が存在するページでは、そこへのページ内リンクとして優先的に機能するので、ページ最上部へのリンクにはなりません。

href属性値を「mailto:」で書き始めれば、メールアドレスにリンクすることもできます。

<a href="mailto:shaoxuanb@gmail.com">メールアドレス</a>