href
初級読み方：エイチレフ｜英語：Href
a タグのリンク先URLを指定する属性だよ。Hypertext REFerenceの略。
やさしい説明
href（エイチレフ）属性とは、リンク先のURLを指定する属性です。「Hypertext REFerence（ハイパーテキスト参照）」の略です。
Webページの「リンク」を作るときに使います。クリックすると別のページに移動する、あの青い文字のことです。
hrefには3種類の書き方があります。外部サイトへのリンク、同じサイト内のリンク、同じページ内の特定の場所へのリンクです。
具体例・使い方
<!-- 外部サイトへのリンク -->
<a href="https://example.com">外部サイト</a>
<!-- サイト内の別ページへのリンク（相対パス） -->
<a href="/about/">自己紹介ページ</a>
<!-- 同じページ内の特定の場所へ（アンカーリンク） -->
<a href="#contact">お問い合わせへジャンプ</a>
<!-- 別タブで開く -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
別タブで開く
</a>hrefの3種類の書き方
- 絶対URL —
https://example.com/pageのように完全なURLを書く。外部サイトへのリンクに使う - 相対パス —
/about/や../contact/のように現在地からの相対的なパスを書く。同じサイト内のリンクに使う - アンカーリンク —
#section1のように#の後に要素のIDを書く。同じページ内の特定の場所へジャンプするときに使う
<!-- アンカーリンクの使い方 -->
<!-- 目次のリンク -->
<a href="#chapter1">第1章へ</a>
<a href="#chapter2">第2章へ</a>
<!-- ジャンプ先の要素（idで指定）-->
<h2 id="chapter1">第1章</h2>
<p>本文...</p>
<h2 id="chapter2">第2章</h2>
<p>本文...</p>アンカーリンクは長いページの目次や「ページ上部へ戻る」ボタンに使われます。リンク先の要素に id 属性を付けることで、ページ内のどこへでもジャンプできます。
いつ使う？
- ナビゲーションメニューを作るとき
- 参考サイトや公式ドキュメントへのリンクを貼るとき
- 長いページの目次（ページ内リンク）を作るとき
- ボタンをリンクにするとき（
aタグ + CSS） - メールアドレスへのリンク（
href="mailto:..."）
間違いやすいポイント
❌ hrefとsrcを混同する
href は「移動先・参照先」（aタグ・linkタグ）、src は「読み込むファイル」（imgタグ・scriptタグ）です。画像に href は使いません。
<!-- ✅ 正しい使い方 -->
<a href="https://example.com">リンク</a> <!-- href: 移動先 -->
<img src="photo.jpg" alt="写真"> <!-- src: 読み込むファイル -->
<!-- ❌ 間違い -->
<img href="photo.jpg"> <!-- imgにhrefは使わない -->
<a src="page.html"> <!-- aにsrcは使わない -->❌ href="#" のまま放置する
仮で書いた href="#" を本番で残すと、クリックしてもページの先頭に戻るだけになります。リンク先が決まっていない場合は href="javascript:void(0)" か、CSSで cursor: pointer を設定したボタンを使いましょう。
よくある疑問
Q: hrefに#だけ書くとどうなる？
A: ページの先頭に移動します。リンク先が未定の場合の仮置きとして使われることがあります。
Q: 相対パスと絶対パスの違いは？
A: 絶対パスは https://example.com/page.html のようにフルURL。相対パスは ./page.html のように現在のファイルからの位置で書きます。同じサイト内なら相対パスが便利です。
Q: リンクを新しいタブで開くには？
A: target="_blank"を追加します。例: <a href="url" target="_blank" rel="noopener">。セキュリティのためrel="noopener"も一緒に書きましょう。
関連用語
📖 関連レッスン
レッスンを見る →