href 属性は「このリンクの行き先はここです」という住所ラベル
まず一番大事なところから。
href 属性は、
「このリンク（a タグ）は、どこへ飛ぶのか？」
という“行き先”を指定するための属性です。
href がない <a> は、
「リンクっぽいけど、どこにも行かない謎の要素」になります。
だから、<a> タグを書くときは
「テキストを書く」より先に
「このリンクの行き先は何か？」を決めて href に書く
という意識を持つと、設計が一気にきれいになります。
href の基本形：絶対 URL と相対 URL
絶対 URL（フルの住所を書くパターン）
外部サイトや、はっきりした URL に飛ばしたいときは
「絶対 URL」を書きます。
<a href="https://developer.mozilla.org/ja/">MDN Web Docs</a>
<a href="https://example.com/contact">お問い合わせフォーム</a>
https:// から始まる、
ブラウザのアドレスバーにそのまま入れられる形の URL です。
これは「郵便番号から全部書いた住所」のイメージ。
どこからアクセスしても、必ず同じ場所に飛びます。
相対 URL（今いる場所からの相対的な道順）
同じサイト内のページにリンクするときは、
「相対パス」を使うことが多いです。
<a href="/about">このサイトについて</a>
<a href="/blog/2026/first-post.html">最初の記事</a>
/ から始まるパスは、
「サイトのルート（トップ）からのパス」です。
例えば、
サイトのトップが https://example.com/ なら、
href="/about" は https://example.com/abouthref="/blog/2026/first-post.html" はhttps://example.com/blog/2026/first-post.html
というふうに解釈されます。
「同じサイトの中での移動」は、
この / から始まる相対パスで書くのが基本です。
ページ内リンクとしての href：「#id」に飛ぶ
同じページの特定の場所へジャンプする
href は、
別のページだけでなく
「同じページの中の特定の場所」にも飛べます。
そのときに使うのが #id です。
<a href="#profile">プロフィールへジャンプ</a>
<h2 id="profile">プロフィール</h2>
<p>ここにプロフィールの内容が入ります。</p>
href="#profile" は、id="profile" が付いた要素までスクロールするリンクです。
長いページの「目次」や「ページトップへ戻る」などは、
この仕組みで作られています。
例：ページトップへ戻るリンク
<a href="#top">ページの先頭へ戻る</a>
<h1 id="top">サイトのタイトル</h1>
ここでは、
ページの一番上の見出しに id="top" を付けて、
そこへジャンプするようにしています。
href=”#” を安易に使う危険性
「とりあえず #」はやめた方がいい
初心者がよくやる書き方がこれです。
<a href="#" onclick="openMenu()">メニュー</a>
href="#" は
「このページの先頭へジャンプする」という意味です。
つまり、クリックすると
JavaScript の openMenu() が動く
同時にページの先頭にスクロールする
という二つの動きが起きてしまう可能性があります。
本来これは「どこかへ移動するリンク」ではなく
「今いるページの中で何かの操作をするボタン」なので、<button> を使う方が正しいです。
どうしても <a> を使うなら、
JavaScript 側で event.preventDefault() を呼んで
リンクとしての動きを止める必要があります。
link.addEventListener("click", (event) => {
event.preventDefault(); // href の遷移を止める
openMenu();
});
でも、設計としては
「操作なら button、移動なら a」
と分けた方がきれいです。
target=”_blank” と href のセット運用
新しいタブで開くリンクのときの href
外部サイトを新しいタブで開きたいときは、href と一緒に target="_blank" を使います。
<a href="https://example.com" target="_blank" rel="noopener">
公式サイト（新しいタブで開く）
</a>
ここでの主役はあくまで href です。target="_blank" は
「その href をどのタブで開くか」の指定にすぎません。
そして、_blank を使うときは
必ず rel="noopener"（または noopener noreferrer）を付ける
というのをセットで覚えておいてください。
rel="noopener" がないと、
リンク先のページが window.opener 経由で
元のページを操作できてしまうことがあり、
セキュリティ上よくありません。
href と JavaScript：イベント処理との付き合い方
「本来はリンク」か「本当はボタン」かを見極める
JavaScript で <a> にイベントを付けるとき、
まず考えるべきは
「これは本当に“どこかへ移動するリンク”なのか？」
「それとも“今いるページの中での操作”なのか？」
です。
本当にリンクなら、href に正しい URL を書いた上で、
必要に応じて JS で処理を足します。
<a href="/logout" id="logoutLink">ログアウト</a>
const logoutLink = document.querySelector("#logoutLink");
logoutLink.addEventListener("click", (event) => {
const ok = window.confirm("本当にログアウトしますか？");
if (!ok) {
event.preventDefault(); // 遷移をキャンセル
}
});
ここでは、
「基本は /logout に飛ぶリンク」だけど
「その前に確認ダイアログを挟みたい」
という設計です。
逆に、
「どこにも移動しないのに href を無理やり付けている」
という状態なら、それは設計を見直すサインです。
href の中身を JavaScript で動的に変える
SPA 風の画面や、条件によって行き先を変えたいとき
JavaScript から href を書き換えることもできます。
HTML：
<a id="downloadLink" href="/files/default.pdf">ダウンロード</a>
JavaScript：
const link = document.querySelector("#downloadLink");
// 条件によってダウンロード先を変える
const isPremiumUser = true;
if (isPremiumUser) {
link.href = "/files/premium.pdf";
} else {
link.href = "/files/free.pdf";
}
ここでは、
ユーザーの状態によって
「同じリンクテキストだけど、行き先を変える」
ということをしています。
このときも、
「href は常に“今の正しい行き先”を表している」
という状態を保つのが大事です。
初心者として「href 属性」で絶対に掴んでほしいこと
href は、
「このリンクの行き先（URL や #id）を表す属性」 です。
a タグにとっての“心臓部”であり、
これがないリンクは意味があいまいになります。
外部サイトには絶対 URL（https://〜）
同じサイト内には相対パス（/about など）
同じページ内の場所には #id を使うhref="#" を安易に使わず、「本当にリンクか？ボタンでは？」と考える
JS でイベントを付けるときは、event.preventDefault() とセットで設計を意識する
あなたが <a> を書くときに、
「この href は“どこへ行く”ことを約束している？」
「このリンクの行き先は、ユーザーにとって自然か？」
と一度でも自問できるようになったら、
もう href を“ただの文字列”ではなく、“ナビゲーションの設計”として扱えている状態です。