a タグは「ページとページをつなぐ“リンクのタグ”」
まず一番大事なことから。
<a> タグは
「ここをクリックすると、どこかへ移動します」
という“リンク”を作るタグです。
「a」は anchor（アンカー＝いかり・錨）の略で、
「ここがリンクの起点ですよ」という“印”を付けるイメージです。
テキストをリンクにしたり、
画像をリンクにしたり、
ボタンっぽく見せたりもできますが、
本質は常に「リンク」です。
a タグの基本形：href が「行き先」
一番シンプルなリンク
<a href="https://example.com">公式サイトはこちら</a>
ここで重要なのは href 属性です。
href
hypertext reference（ハイパーテキストの参照）の略。
「このリンクをクリックしたら、ここへ行きます」という“行き先”を表す。
href がない <a> は、
「行き先のないリンク」になってしまうので、
基本的には href は必ず付ける と覚えてください。
ページ内リンク・サイト内リンク・外部リンク
同じサイト内の別ページへのリンク
<a href="/about.html">このサイトについて</a>
<a href="/contact">お問い合わせ</a>
/ から始まるパスは、
「このサイトのルートからのパス」です。
/contact ならhttps://example.com/contact
のようなイメージです。
外部サイトへのリンク
<a href="https://developer.mozilla.org/ja/">MDN Web Docs</a>
https:// から始まる URL を書けば、
別のサイトへのリンクになります。
同じページ内の特定の場所へのリンク（アンカー）
<a href="#profile">プロフィールへジャンプ</a>
<h2 id="profile">プロフィール</h2>
<p>ここがプロフィールの内容です。</p>
href="#profile" は、id="profile" が付いた要素までスクロールするリンクです。
ページが長くなったときの「目次」や「ページトップへ戻る」などに使えます。
新しいタブで開く：target=”_blank” と rel=”noopener”
新しいタブで開きたいとき
<a href="https://example.com" target="_blank" rel="noopener">
公式サイト（新しいタブで開く）
</a>
target="_blank"
「このリンクは新しいタブ（またはウィンドウ）で開いてね」という指定。
ただし、_blank だけだと
セキュリティ・パフォーマンス上の問題があるため、rel="noopener"（または rel="noopener noreferrer"）をセットで付ける
のが今のベストプラクティスです。
rel="noopener" を付けることで、
リンク先のページが window.opener 経由で
元のページを操作できなくなります。
a タグの中身：テキストだけでなく画像も OK
テキストリンク
<a href="/blog">ブログを見る</a>
これは一番基本的な「文字のリンク」です。
画像リンク
<a href="/blog">
<img src="thumb.jpg" alt="ブログのサムネイル">
</a>
画像全体をクリックできるリンクにすることもできます。
ここで alt をきちんと書いておくと、
画像が読み込めないときやスクリーンリーダー利用時にも
「何のリンクか」が伝わります。
a タグとボタンの違いをしっかり区別する
「ページ遷移」は a、「操作」は button
ここ、めちゃくちゃ重要です。
a タグ
どこか別の場所へ「移動」するもの。
ページ遷移・別ページ・別サイト・ページ内ジャンプなど。
button タグ
今いるページの中で「何かの操作」をするもの。
モーダルを開く、フォームを送信する、タブを切り替えるなど。
悪い例（ボタンっぽい見た目だから a を使う）：
<a href="#" class="btn">メニューを開く</a>
見た目はボタンでも、
「どこかへ移動するわけではない」なら
本来は <button> を使うべきです。
正しい方向性：
<button type="button" class="btn">メニューを開く</button>
a タグは「リンク」
button タグは「操作」
この区別を意識できると、
アクセシビリティもコードの意味も一気に良くなります。
href=”#” を安易に使わない
「とりあえず #」は危険なクセ
初心者がよくやる書き方：
<a href="#" onclick="openMenu()">メニュー</a>
href="#" は
「このページの先頭へジャンプする」という意味です。
JavaScript で onclick を付けていると、
クリックしたときに
メニューが開く
ページの先頭にスクロールする
という二つの動きが重なってしまうことがあります。
本来は「リンクではなく操作」なので、<button> を使う方が正しいです。
どうしても <a> を使うなら、
JavaScript 側で event.preventDefault() を呼んで
リンクとしての動きを止める必要があります。
a タグと JavaScript：イベントを付けるときの注意
クリックイベントを JS で扱う
<a href="/logout" id="logoutLink">ログアウト</a>
const logoutLink = document.querySelector("#logoutLink");
logoutLink.addEventListener("click", (event) => {
const ok = window.confirm("本当にログアウトしますか？");
if (!ok) {
event.preventDefault(); // リンクの遷移をキャンセル
}
});
ここでは、
「確認ダイアログでキャンセルされたら、リンク遷移を止める」
という処理をしています。
event.preventDefault() は
「a タグ本来の動き（href への遷移）を止める」
という意味です。
a タグに JS を組み合わせるときは、
「リンクとしての動き」と「JS の動き」が
二重になっていないかを意識する必要があります。
アクセシビリティ的に「分かりやすいリンクテキスト」にする
「こちら」だけのリンクは避ける
悪い例：
<p>詳しくは <a href="/terms">こちら</a> をご覧ください。</p>
これだと、スクリーンリーダーで
リンクだけを一覧したときに
「こちら」「こちら」「こちら」…と並んでしまい、
何が何だか分かりません。
より良い書き方：
<p><a href="/terms">利用規約の詳細</a> をご覧ください。</p>
リンクテキストだけを読んでも
「どこへ飛ぶリンクか」が分かるようにしておくと、
ユーザーにとっても機械にとっても親切です。
初心者として「a タグ」で絶対に掴んでほしいこと
<a> は、
「どこかへ移動するためのリンクを作るタグ」 です。
href が行き先。必ず意味のある URL や #id を入れる
ページ遷移・別サイト・ページ内ジャンプなど「移動」に使う
「操作」には <button> を使い、a と混同しないtarget="_blank" を使うときは rel="noopener" をセットで付ける
リンクテキストは「こちら」ではなく、行き先が分かる言葉にする
あなたが <a> を書くときに、
「これは本当に“どこかへ移動する”ものか？」
「ボタンじゃなくてリンクである理由は何か？」
と一度考えられるようになったら、
もう a タグを“見た目のボタン”ではなく、“意味のあるリンク”として扱えている状態です。
