HTMLのaタグの使い方まとめ｜初心者向け徹底解説

HTMLでリンクを作成するために使うのが <a>タグ（アンカータグ） です。
この記事では、<a>タグの基本的な使い方から応用的な使い方までを整理し、初心者でも基礎を完璧にできるように解説します。

aタグとは？

<a>タグは 「アンカー（anchor）」 を意味し、他のページや同じページ内の特定の場所に移動するためのリンクを作成できます。
もっとも基本的な形は以下の通りです。

<a href="https://example.com">リンクテキスト</a>

• href 属性 … リンク先のURLを指定
• リンクテキスト … 実際にクリックできる文字

基本的な使い方

外部リンクを作る

<a href="https://www.google.com">Google</a>

ユーザーがクリックするとGoogleのサイトに移動します。

内部リンクを作る

自分のサイト内のページに移動する場合は相対パスを使うのが一般的です。

<a href="/about.html">このサイトについて</a>

👉 相対パスの詳しい書き方は HTMLの基本構文まとめ を参考にしてください。

新しいタブで開く（target属性）

<a href="https://example.com" target="_blank">新しいタブで開くリンク</a>

• target="_blank" を指定するとリンク先が新しいタブ（またはウィンドウ）で開きます。
• セキュリティの観点から rel="noopener noreferrer" を一緒に書くのが推奨されています。

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  安全に新しいタブで開く
</a>

ページ内リンク（アンカーリンク）

ページ内の特定の場所に移動するリンクも作れます。
例えば見出しに id をつけ、その場所にジャンプするように設定します。

<!-- リンク先 -->
<h2 id="contact">お問い合わせ</h2>

<!-- リンク元 -->
<a href="#contact">お問い合わせへ移動</a>

👉 このようなアンカーリンクは HTMLセマンティックタグ徹底解説 の記事内でもよく利用されます。

画像やボタンをリンクにする

<a>タグの中にテキスト以外の要素を入れることも可能です。

画像リンク

<a href="https://example.com">
  <img src="image.jpg" alt="サンプル画像">
</a>

ボタン風リンク（CSSで装飾）

<a href="contact.html" class="btn">お問い合わせ</a>

👉 CSSでデザインを整える方法については HTMLとCSSの基本構文まとめ を確認すると理解が深まります。

メールリンク・電話リンク

メールリンク

<a href="mailto:info@example.com">メールを送る</a>

電話リンク

<a href="tel:0123456789">電話する</a>

スマートフォンでタップするとそのまま発信画面が開きます。

よくある注意点

1. リンク切れに注意
   相対パス・絶対パスの使い分けを誤ると404エラーになります。
   👉 HTMLの基本構文まとめ で確認しましょう。
2. SEOとリンクの関係
   検索エンジンはリンクをたどってページを評価します。nofollow を使う場合もあります。
3. ユーザビリティ
   • リンクテキストは「こちら」よりも「お問い合わせフォーム」など具体的に書く方が親切です。
   • 色や装飾でリンクだとわかるようにしましょう。

まとめ

• <a>タグはリンクを作るための基本タグ
• href属性でリンク先を指定
• 外部リンク・内部リンク・ページ内リンク・メール/電話リンクなど使い分け可能
• target="_blank" を使う場合は rel="noopener noreferrer" を忘れずに

👉 次は HTMLの基本構文まとめ や HTMLセマンティックタグ徹底解説 も合わせて読むと、より理解が深まります。