【初心者向け】HTMLのhref属性の使い方を徹底解説！内部リンク・外部リンクの設定方法

href属性とは？

href属性は、HTMLの中でも最も重要な属性のひとつです。リンク先のURLを指定することで、Webページ同士をつなぐ重要な役割を担っています。

hrefは、主に以下のようなURLを指定するために使われます。

• ハイパーリンク（通称「リンク」）の作成
• スタイルシートやスクリプトなど、外部リソースの読み込み

href属性の最も一般的な使い方は、アンカー要素<a>に、サイト内リンク（内部リンク）または外部リンク（URL）を設定することです。

<a href="link-path">Click</a>

hrefで内部リンクを作成する

まずは、クリックするとサイトのトップページへ移動するリンクを作成してみましょう。リンクテキストは「Home」とします。

最初に、アンカー要素だけを定義します。

<a>Home</a>

この状態では単なるテキストに過ぎません。ここにhref属性を追加することで、要素がハイパーリンクとして機能するようになります。

<a href>Home</a>

さらに、値として"/"（サイトのルート＝トップページ）を指定します。

<a href="/">Home</a>

ブラウザでは次のように表示されます。

Home

理解を深めるために、このアンカー要素を構成要素ごとに分解してみましょう。

• <a> … アンカー要素の開始タグ
• </a> … アンカー要素の終了タグ
• Home … コンテンツ（ブラウザ上に表示される唯一の部分）
• href … 属性名
• = … 代入演算子
• "/" … 属性値

実は、多くのWebサイトでは、まさにこのコードがヘッダー左上のロゴを囲むために使われています。ロゴをクリックするとトップページに戻る、あの挙動の正体です。

また、ナビゲーションバー<nav>...</nav>の中でも、同じような記述をよく目にします。

ここで、サイトに「Home」「About」「Contact」の3ページがあり、それぞれへの内部リンクを作りたいケースを考えてみましょう。

まず、各ページのHTMLファイルを以下のように命名します。

• Home → index.html
• About → about.html
• Contact → contact.html

続いて、各ページへの相対パスを指定したリンクを定義します。

<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>

さらに、これらのアンカー要素を<nav>要素で囲みます。

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

これで、サイトのヘッダー・フッター・サイドバーなどに配置できるナビゲーションメニューの完成です。

hrefで外部リンクを作成する

自分のサイト以外のWebページへリンクする場合は、https://から始まる絶対パスを指定する外部リンク形式を使います。

<a href="https://www.youtube.com">YouTube.comへのリンク</a>

外部リンクを新しいタブで開きたい場合は、target="_blank"を組み合わせると便利です。セキュリティ向上のため、rel="noopener"も一緒に指定しておくと安心です。

<a href="https://www.youtube.com" target="_blank" rel="noopener">YouTube.comへのリンク</a>

href属性はアンカー要素以外でも使われている

href属性は<a>要素専用ではありません。たとえば、CSSファイルを読み込む<link>要素でも利用されています。

<link rel="stylesheet" href="style.css">

このようにhrefは、「参照先を指定する」という役割においてHTML全体で幅広く使われる、非常に汎用性の高い属性だと言えます。

まとめ

• hrefはリンク先のURLを指定する、HTMLの最重要属性のひとつ
• 内部リンクは/aboutのような相対パス、外部リンクはhttps://から始まる絶対パスで指定する
• <nav>要素と組み合わせれば、簡単にナビゲーションメニューが作れる
• <link>要素によるCSS読み込みなど、アンカー以外の場面でも活躍する