HTMLのaタグとは？リンクの貼り方・別タブで開く方法・色変更まで解説

Web制作の中で最もよく使われるタグのひとつが、<a>タグ（アンカータグ）です。
リンクを作る基本的な要素であり、正しく理解することで
Webページのナビゲーション性やSEOにも大きな影響を与えます。

この記事では、以下のポイントを中心に初心者にもわかりやすく解説します。

1. <a>タグの基本的な使い方

<a>タグは、ユーザーがクリックできるリンクを作成するためのHTML要素です。

書き方の基本

<a href="https://example.com">Exampleサイトへ</a>

• href属性：リンク先のURLを指定します。
•  
• タグの中のテキストがクリック可能なリンクになります。

相対パスと絶対パスの違い

• 絶対パス： https://example.com/about.html
•  
• 相対パス： about.html（現在のページからの相対位置）

2. よくある失敗とその解決方法

① クリックできない

<a>リンク</a>

問題点： hrefsが抜けている
解決策： 必ずhref属性を記述しましょう。

<a href="https://example.com">リンク</a>

② 外部リンクが別タブで開かない

<a href="https://外部サイト.com">外部サイト</a>

問題点： ユーザーが現在のページから離れてしまう。
解決策： target="_blank"を付けることで新しいタブで開けます。

<a href="https://外部サイト.com" target="_blank" rel="noopener noreferrer">外部サイト</a>

rel="noopener noreferrer" はセキュリティ対策として必須です。

③ ボタンのように見せたいのに装飾されない

<a>タグはデフォルトでは青色＆下線が付きます。
CSSで装飾すればボタンのように表示可能です。

3. よく使われる属性一覧

rel="noopener" とは？

noopener は、リンク先のページがリンク元のページの window オブジェクトにアクセスできないようにするための設定です。

window.opener.location = 'https://悪意のあるサイト.com';

noopenerを設定することで、
リンク先のページから window.opener が null になり、リンク元のページを操作できなくなります。

rel="noreferrer" とは？

noreferrer は、リンクをクリックした際に、リンク先に「どこから来たのか」（リファラー情報）を送らない設定です。

noreferreを設定することで、
リンク先にReferer情報が一切送られなくなり、ユーザーのプライバシーを守ることができます。

4. ボタンのようなリンクの作り方

<a>タグにCSSを適用することで、ボタン風にカスタマイズできます。

例：シンプルなボタンリンク

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

.btn { 
  display: inline-block; 
  padding: 10px 20px; 
  background-color: #007BFF; 
  color: #fff; 
  text-decoration: none; 
  border-radius: 5px; 
}

buttonタグとの違いは？

• <a>：ページ遷移用のリンク
•  
• <button>：フォーム送信やJavaScript実行用

まとめ

<a>タグはWeb制作に欠かせない基本中の基本ですが、使い方を誤るとユーザー体験やSEOに悪影響を及ぼすこともあります。

ポイントは以下の通りです：

• href属性は必ず指定する
•  
• 外部リンクには target="_blank" + rel="noopener noreferrer"
•  
• ボタン風にしたいときはCSSで装飾
•  
• 正しい属性の使い分けが重要

初心者のうちは <a>タグを何度も書いて慣れていくのが一番です。
ぜひ本記事を参考に、リンク作成のスキルをしっかり身につけてください！