【デザイン基礎】【初心者向け】HTMLのリンク＜aタグ＞の書き方を完全マスター！基本から属性の使い分けまで徹底解説

Webサイト制作を学び始めた際、最初に出会う「最も重要」かつ「最も頻繁に使う」タグの一つが `` タグです。アンカー（Anchor）の頭文字をとったこのタグは、WebサイトとWebサイトを繋ぎ、情報の海を渡るための「橋」の役割を果たします。

今回は、Webデザインの現場で10年以上キャリアを積んできたシニアデザイナーの視点から、`` タグの基本から、プロとして押さえておきたい応用的な属性の使い方まで、実務レベルの知識を余すことなく解説します。

`` タグは、HTMLにおいて「ハイパーリンク」を作成するための要素です。リンクとは、クリックすることで別のページやファイルに移動したり、同じページ内の特定の場所にジャンプしたりする仕組みのことです。

リンクテキスト

`href`（エイチレフ）属性は「Hypertext Reference」の略で、リンク先のURLを指定するために必須の属性です。`` タグで囲んだテキスト（リンクテキスト）がユーザーの目に触れ、そこをクリックすることで指定したURLへ遷移します。

**1. 絶対パス**
`https://` から始まる完全なURLを指定する方法です。外部のWebサイトへリンクを貼る場合は、必ずこの絶対パスを使用します。
例：`Googleへ移動`

**2. 相対パス**
自分のWebサイト内にあるファイルへリンクを貼る場合に使用します。現在のファイルから見て、目的のファイルがどこにあるかを指定します。
例：`会社概要ページへ`
（現在のフォルダ内にある `about.html` を指定）

初心者のうちは、外部サイトなら「絶対パス」、サイト内なら「相対パス」と覚えておけば間違いありません。

別タブで開く「target=”_blank”」の正しい使い方

Web制作の現場でよく議論になるのが、「リンクを別タブで開くべきか、同じタブで開くべきか」という点です。

新しいタブでリンクを開かせたい場合は、`target=”_blank”` 属性を追加します。

外部サイトへ（別タブ）

ここで重要なのが `rel=”noopener”` です。これはセキュリティ対策として必須です。`target=”_blank”` を使用すると、リンク先ページから元のページを操作できてしまうという脆弱性があるため、`rel=”noopener”` を付与することでこれを防ぎます。最近のモダンブラウザでは自動的に適用されることも多いですが、プロとして明示的に記述する癖をつけておきましょう。

ページ内リンク（アンカーリンク）の作り方

長いコンテンツを持つページでは、目次から各セクションへジャンプする「ページ内リンク」が有効です。これには `id` 属性を活用します。

1. 飛び先の要素に `id` を設定する
`

1. リンクの基本

`

2. `` タグの `href` に `#` をつけて `id` を指定する
`リンクの基本へジャンプ`

これにより、クリックすると指定した `id` の場所までスムーズに移動できます。

アクセシビリティを意識したリンクテキストの作成

ここからは少しプロフェッショナルな視点でのアドバイスです。リンクテキストには「こちら」や「クリック」という言葉を使うのは避けましょう。

例えば、スクリーンリーダー（音声読み上げソフト）を使用しているユーザーにとって、「こちらをクリック」というリンクが連続すると、どこに何があるのか理解できなくなります。

・悪い例：`こちらからお問い合わせください。`
・良い例：`お問い合わせフォームからご連絡ください。`

リンクテキストだけで「どこに繋がるのか」が明確になるように書くことが、Webアクセシビリティ向上の第一歩です。

SEOとUXを向上させる「title属性」と「aria-label」

`` タグには他にも便利な属性があります。

**title属性**
マウスホバー時に補足説明を表示させます。
`会社概要`
ただし、スマホではホバー操作ができないため、過度な期待は禁物です。あくまで補助的な情報提供と考えましょう。

**aria-label属性**
アイコンのみのリンクなど、テキストが存在しない場合に、スクリーンリーダーにリンクの役割を伝えるために使用します。
`…`

まとめ：リンクはWebの血流である

`` タグは非常にシンプルですが、Webサイトの導線を構築する極めて重要な要素です。