<a>

リンクタグ(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サイトの血管のようなものです。ユーザーを迷子にさせないよう、「分かりやすいテキスト」で「正しい場所」へ導く設計を心がけましょう。「ここをクリック」という表現は避け、「お問い合わせはこちら」のように具体的に書くのが親切です。