リンクとナビゲーション：Webの世界を繋ぐアンカータグ
第4回では、Webサイトの最大の特徴である「ハイパーリンク」の仕組みを解説します。外部サイトへのリンクや同じサーバー内のファイルへの指定方法を正しく書き分けられるようになります。
1. アンカー（a）タグとhref属性の役割
Webサイト上のクリックすると他のページに移動するリンクは、a要素（Anchor = 錨）を使って記述します。アンカーという名前の通り、文書同士を繋ぎ止める役割を持っています。
aタグの中では、リンク先のURLを指定するために必ず href（Hypertext Reference）属性を設定します。
<a href="https://google.com">Googleのサイトを開く</a>
2. 相対パスと絶対パスの違い
リンク先を指定する記述形式には、大きく分けて「絶対パス」と「相対パス」の2種類があります。この違いを理解することがWeb制作の非常に重要な関門です。
図：リンク先を特定する「パス（Path）」の指定メカニズム
🌐 絶対パス (Absolute Path)
`https://` から始まるインターネット上の住所（URL）を直接指定する方法です。自サイトの外部（他社のページなど）へリンクする場合は、必ずこの絶対パスで指定します。
3. 新しいタブで開く target=”_blank” とセキュリティ対策
外部のWebサイトへリンクする際など、現在のページを残したまま別ウィンドウ（または別タブ）でリンク先を開きたい場合は、target=”_blank” 属性を使用します。
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部サイトへ</a>
🔒 重要：rel=”noopener noreferrer” の付与ルール
`target=”_blank”` を指定する場合、セキュリティ上の脆弱性（別タブからの悪意あるスクリプト書き換え）を防ぐため、および不要な参照元情報の送信を防ぐため、必ず `rel=”noopener noreferrer”` をセットで付与してください。これはセキュリティ品質を保つための現代のWeb制作における必須マナーです。
4. 同じページ内へのスクロールリンク
「目次をクリックして同じページの下部へスクロールさせる」といったページ内遷移には、移動先の要素の id 属性を利用します。リンク元の href には `#id名` を指定します。
<!-- リンク元 --> <a href="#contact-form">お問い合わせフォームへ移動する</a> <!-- 移動先 --> <div id="contact-form"> ここにフォームの内容が入ります </div>
1つ上の階層の親フォルダに置いてある `index.html` に、相対パスでリンクさせたいときの href 属性の指定方法として正しい記述はどれでしょうか？
※この問題の解答と解説は、ページ最下部（まとめの前）に掲載しています。
5. まとめと次回予告
aタグを使いこなすことで、Webの本領である「情報のネットワーク化」ができるようになりました。パスの概念（特に相対パス）は何度も練習して手に馴染ませましょう。
次回（第5回）は、「画像やメディアを美しく配置する imgタグとメディア関連」について、高解像度画像の取り扱い方や代替テキストの設定方法を学習します！
📖 HTMLの基礎を全10回でマスターする
🔑 第4回 理解度チェックの解答と解説
【解説】
正解は `../index.html` です。`../` は「現在のフォルダから1つ上の親フォルダ階層へ移動する」という意味を持つ特殊な表現です。