リンクタグ(Anchor)
World Wide Webの核となる、ページ同士を繋ぐ「ハイパーリンク」を作成する要素。
Webを「網(Web)」にする最重要タグ
インターネットが数多の文書の集まりではなく、巨大なネットワークとして機能しているのは、この `` タグのおかげです。「Anchor(アンカー:船の錨)」に由来し、情報の海に錨を下ろして、ページとページを強固に繋ぎ止める役割を果たしています。
1. 基本的な書き方
`href`(エイチレフ:Hypertext Reference)属性に、移動先の住所(URL)を指定します。これがないとリンクとして機能しません。
コード例
<a href="https://google.com">Googleへ</a>
<!-- サイト内の別のページへ -->
<a href="about.html">会社概要</a>
2. パスの指定方法:絶対パスと相対パス
リンク先の指定には2つの種類があります。これらを正しく使い分けることが、リンク切れを防ぐ第一歩です。
絶対パス (Absolute Path)
`https://...` から始まる完全なURLです。外部サイト(YoutubeやTwitterなど)にリンクする場合は必ずこれを使います。
例: `https://example.com/page.html`
相対パス (Relative Path)
「今いる場所から見てどこにあるか」を指定します。自分のサイト内の移動によく使われます。
例:
`./page.html` (同じ階層)
`../index.html` (一つ上の階層に戻る)
`images/pic.jpg` (下の階層へ)
3. 便利な属性たち
リンクの挙動をコントロールする属性を紹介します。
- target="_blank": 新しいタブで開きます。外部サイトへのリンクでよく使われます。
- rel="noopener noreferrer": `target="_blank"` を使う際のセキュリティ対策です。古いブラウザでの脆弱性を防ぎます。
- download: クリックすると画面遷移せず、ファイルをダウンロードさせることができます。
4. URL以外のリンク (特殊プロトコル)
Webページ以外のアクションを呼び出すことも可能です。
<a href="mailto:info@example.com">メールを送る</a>
<!-- 電話をかける(スマホで有効) -->
<a href="tel:03-1234-5678">電話をかける</a>
5. ページ内リンク(アンカーリンク)
同じページの中の特定の位置にジャンプすることもできます。「目次」などでよく見かけます。
<a href="#section1">第1章へジャンプ</a>
<!-- ジャンプ先(idを指定) -->
<h2 id="section1">第1章</h2>
まとめ
リンクはWebサイトの血管のようなものです。ユーザーを迷子にさせないよう、「分かりやすいテキスト」で「正しい場所」へ導く設計を心がけましょう。「ここをクリック」という表現は避け、「お問い合わせはこちら」のように具体的に書くのが親切です。