ページ間をつなぐ「リンク」
Webページは1枚のファイルで完結するものではなく、複数のページが互いに関連して構成されています。
そのページ同士を行き来するための仕組みが「リンク」です。
リンクを作るためのタグがaタグ（アンカー）で、ユーザーがクリックできるテキストや画像を設定できます。
aタグの基本
aタグは「リンクの起点」となる要素です。
最もシンプルな書き方は、次のように単独で記述する方法です。
構文
<a 属性="属性値">...</a>aタグはインライン要素で、href属性の属性値にパスを指定することで機能します。
| 属性名 | 属性値 | 用途 |
|---|---|---|
| href | パス | 指定されたパスにリンクする。 |
| target | _self | 同じタブに移動します。 |
| _blank | 新しいタブを開いてリンクを表示します。 | |
| title | 任意の文字列 | リンクの上にポインターを合わせると指定した文字列がポップアップ表示されます。 |
コード例
<a href="next.html" target="_blank">次のページへ</a>出力例
このようにaタグはリンクテキストを囲むだけで機能します。
ただし実際のWebページでは、段落や見出しの中などに含めて使うのが一般的です。
他の要素と組み合わせて使う
aタグは単独だけでなく、他の要素（p・li・h1～h6など）の中に含めて使うことができます。
これにより、ナビゲーションやタイトル見出しにもリンクを設定できます。
コード例
<!-- 段落で使う場合 -->
<p>
詳しい情報は<a href="info.html">こちら</a>をクリック
</p>
<!-- リストで使う場合 -->
<li>
<a href="news.html">新着情報</a>
</li>
<!-- 見出しで -->
<h3>
<a href="../about.html">サイトについて</a>
</h3>出力例
このように、リンクは文中でも見出しでも自由に設定できます。
ただし、リンク同士を入れ子にする（aタグの中にaタグを入れる）のは禁止されています。