href
初級読み方：エイチレフ｜英語：Href
a タグのリンク先URLを指定する属性だよ。Hypertext REFerenceの略。いつ使う？ 別のページへのリンクを作るとき、<a href="https://example.com">リンク</a>のように書くよ。外部サイトだけでなく、同じサイト内の別ページへのリンクにも使うよ。間違いやすいポイント: hrefのスペルミス（hrefをherfと書くなど）に注意。また、リンク先のURLを間違えると404エラーになるよ。
やさしい説明
href（エイチレフ）属性とは、リンク先のURLを指定する属性です。「Hypertext REFerence（ハイパーテキスト参照）」の略です。
Webページの「リンク」を作るときに使います。クリックすると別のページに移動する、あの青い文字のことです。
hrefには3種類の書き方があります。外部サイトへのリンク、同じサイト内のリンク、同じページ内の特定の場所へのリンクです。
具体例・使い方
<!-- 外部サイトへのリンク -->
<a href="https://example.com">外部サイト</a>
<!-- サイト内の別ページへのリンク -->
<a href="/about/">自己紹介ページ</a>
<!-- 同じページ内の特定の場所へ -->
<a href="#contact">お問い合わせへジャンプ</a>いつ使う？
ナビゲーションメニューを作るとき、参考サイトへのリンクを貼るとき、ページ内の目次を作るときに使います。Webサイトにリンクは必須です。
間違いやすいポイント
❌ hrefとsrcを混同する
href は「移動先」（aタグ）、src は「読み込むファイル」（imgタグ）です。画像に href は使いません。
❌ href="#" のまま放置する
仮で書いた href="#" を本番で残すと、クリックしてもページの先頭に戻るだけになります。
よくある疑問
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"も一緒に書きましょう。
関連用語
📖 関連レッスン
レッスンを見る →