href とは？初心者が知っておくべき使い方と基礎知識共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

href とは？基本の定義

href はHTML の中でリンク先を示す重要な属性です。正式には「Hypertext Reference」または「Hypertext URL Reference」などと呼ばれることもあり、リンクをどこへ飛ばすかを決める役割を持ちます。
ウェブページを閲覧する際、文字や画像をクリックすると別のページへ移動します。このときクリックされる対象のURLを指し示すのが href です。

使い方の基本

実際のHTMLでは、リンクを作るときに <a href='URL'>リンクテキスト</a> という形を使います。ここで URL の部分が href の値になります。「相対URL」と「絶対URL」という2つの書き方があり、使い分けが大事です。

相対URLと絶対URL

<th>種類

説明
相対URL	現在のページの場所を基準にリンク先を決める。例えば「/about/」のようにサイト内の別のページを指します。
絶対URL	http(s)://で始まる完全なURL。外部のサイトへリンクする時や、特定のページを確実に指す時に使います。

例: <a href='https://www.example.com'>Example</a> や <a href='/contact'>お問い合わせ</a> など。

リンクテキストの重要性

リンク先の内容を表す意味のあるテキストを使うと、読み手にとって分かりやすく、検索エンジンにも適切な信号を送ることができます。例えば「こちらをクリック」よりも「使い方の詳しい説明ページへ」という表現の方が、訪問者にも検索エンジンにも有益です。

セキュリティとアクセシビリティのポイント

外部サイトへリンクする場合、場合によっては新しいタブで開く方が使い勝手が良いことがあります。実務では target 属性や rel 属性を適切に使い分けますが、この文章では説明のみを行います。リンクを設計する際には、視覚障害の方にも読み上げソフトが内容を伝えやすいテキストを心がけましょう。

実務で気をつけたいのは、リンク先が動的に変わらないかどうかの確認と、リンク切れのチェックです。Link チェックツールやウェブマスターツールを使って、定期的に href が正しいかを検証しましょう。

実践のコツとチェックリスト

以下のポイントを押さえると、初心者でも「使えるリンク」が作れます。

項目	内容
URL の正確さ	URL が正しく入力されているかを確認します。
相対URL vs 絶対URL	用途に応じて使い分け、サイトの移動性を考える。
リンクテキスト	内容を表す言葉にする。
外部リンクの挙動	新しいタブで開く場合は説明を工夫し、必要に応じて rel 属性を設定する。
リンク切れのチェック	定期的にURLを確認し、切れていれば修正する。

このように href はウェブページの導線を作る基本要素です。正しく使えば、サイトの読みやすさやSEOにも良い影響を与えます。

よくある誤解とFAQ

Q: href だけを変えてリンクは表示されるの？
A: いいえ。リンクの見た目を決めるのはリンクテキストと周囲の文章です。href はリンク先を指すだけの属性です。

hrefの関連サジェスト解説

location href とは: location href とは、JavaScript の location オブジェクトのプロパティのひとつで、現在表示しているページの URL を表します。URL はインターネット上の住所のようなもので、https://〜の形をしています。location.href を見ると、今どのページを見ているのか分かります。書き換えれば別のページへ飛ぶことができます。つまり、location.href は「現在のURLを知る」そして「URLを指定して移動させる」両方に使える便利な道具です。使い方の基本は次のとおりです。まず現在のURLを知るには、console.log(location.href); とします。これを実行すると、ブラウザの開発者ツールのコンソールに現在のURLが表示されます。次に別のページへ移動するには、location.href に新しい URL を代入します。例: location.href = "https://www.example.com"; これを実行すると、すぐにそのページへ切り替わります。ほかにも似た機能として location.assign("https://www.example.com"); も同じ動作です。履歴の取り扱いが微妙に違い、location.replace("https://www.example.com"); は現在の履歴エントリを置き換えるため、戻るボタンで前のページに戻れなくなる点に注意してください。注意点として、location.href を使って外部サイトへ移動するときは、セキュリティやユーザー体験に配慮しましょう。自動的な移動を行うと混乱を招くことがあります。また、現代のウェブ開発では SPA などでは pushState などの履歴 API が使われ、location.href だけに頼らない設計が多くなっています。実践のコツとしては、まず自分のサイトで現在の URL を知る癖をつけ、次に「このページから別のページへどう移動させるか」をコードで考える練習をすると良いでしょう。location.href は基本的で理解しておくと、JavaScript の他の機能を学ぶときにも役立ちます。
window.location.href とは: window.location.href とは、ブラウザが現在表示しているURLを表す、JavaScript の window オブジェクトの href プロパティのことです。つまり、現在のページのURLを文字列として取得でき、別のページへ移動したいときには新しいURLを代入することで遷移します。使い方の基本は以下のとおりです。まず現在のURLを知りたい場合は `window.location.href` を参照します。例: `console.log(window.location.href);` とすると現在のアドレスが表示されます。次に別のページへ移動したいときは、`window.location.href = 'https://example.com';` のように新しいURLを代入します。これと同じ動きをするのが `window.location.assign('https://example.com')` です。履歴に残したくない場合は `window.location.replace('https://example.com')` を使います。これをすると現在のページを履歴から置き換え、戻るボタンで前のページへ戻れなくなります。もう少し細かく分解すると、`window.location.origin` はプロトコルとドメインだけを取り出す方法で、`window.location.pathname` はURLのパス部分だけを取り出す方法です。現在のURLを加工して別のURLを作ってから移動させたいときは、これらを組み合わせて作成します。なお、`href` を使って遷移させるときには必ず信頼できるURLを使うことが大切です。外部サイトへ遷移するコードをユーザー入力で作ってしまうと、オープンリダイレクトと呼ばれるセキュリティ上の問題の原因になることがあります。実務では、ユーザー体験を崩さずに適切なタイミングでページを遷移させる方法を選ぶことが重要です。この記事では、初心者の方にも分かりやすいように、現在のURLを確認する方法、別のURLへ移動する基本の書き方、履歴の扱い方、そして安全性のポイントを中心に解説しました。
base href とは: base href とは、HTML の head タグの中に置く base 要素の href 属性のことです。base 要素を設定すると、そのページ内の相対URLの基準となる「基準URL」が決まります。例えば head にと書くと、リンク先や画像の src、CSS の href、スクリプトの src など、相対URLで書かれたものはすべてこの base URL を基準に解決されます。たとえばがあれば、実際には https://example.com/dir/page.html へ移動します。フォームの action も相対 URL なら base を使って解決され、action='submit' は https://example.com/dir/submit になります。絶対URL(http/https)は影響を受けません。複数の base 要素を書いたり、base を動的に変更したりすると、ページ内の資源の読み込み先が混乱することがあるので注意しましょう。実務での使い方としては、既定のディレクトリ配下のリンクだけを指すページを作るときなど、特定の相対URLの解決先を固定したい場合に有効です。なお、SEO の観点では相対URLの解決先を予測可能にすることが大切で、base を使うとページのパス構造が分かりにくくなる場合もあるため、使い方は慎重に検討してください。実際の運用では、テスト用の小さな HTML ページで挙動を必ず確認しましょう。
document.location.href とは: document.location.href とは、現在表示している Web ページの URL を表すプロパティです。document は HTML 文書を表すオブジェクトで、location はそのページを指す Location オブジェクトの参照です。href は Location オブジェクトのプロパティの一つで、現在のページの URL を文字列として返します。たとえば、ブラウザの開発者ツールのコンソールで console.log(document.location.href); と入力すると、現在の URL が表示されます。これと同じことを window.location.href で実行することも多いです。\n\n重要な点は、href に代入することでページを移動できることです。例: document.location.href = 'https://example.com'; と書くと、その URL のページへジャンプします。もちろん相対 URL も使えます。例えば 'about.html' など。\n\n他の移動手段として location.assign('...') や location.replace('...') があります。assign は新しい履歴エントリを作って遷移します。replace は現在のページを新しいページで置き換え、戻るボタンで元のページへ戻れなくなります。リンクのような振る舞いを作るときに使い分けます。\n\nまた、document.location.href を使う場合は、同一ドメイン内の移動か、適切な URL を指定することが大切です。クロスオリジンの移動はブラウザのセキュリティポリシーによって制限されませんが、外部サイトへ飛ぶ場合は信頼できるリンクかどうかを確認しましょう。\n\n実務での使いどころとしては、フォームの送信後のリダイレクト、現在の URL の参照を取得してユーザーに表示する、あるいは条件付きで別ページへ案内する時などが挙げられます。\n\nまとめとしては、document.location.href は現在の URL を取得・設定できる便利なツールです。使い分けとして、単純な遷移は href に代入、履歴を細かく制御したい場合は assign/replace を使うと良いでしょう。
data-href とは: data-href とは、HTML のデータ属性の一つで、要素に任意のデータを持たせるための仕組みです。データ属性は data- 記法で始まり、JavaScript から element.dataset を使って取り出すことができます。特に data-href はリンク先の URL を格納する用途でよく使われ、クリック時の動作を自分で決めたい場合に便利です。例えば data-href に別の URL を入れておき、JavaScript でその値を読み取って新しいページへ移動させるといった使い方ができます。ただし data-href を書いても自動で飛ぶわけではなく、通常のリンクは href 属性が働きます。データ属性は補助的な情報を格納するためのものなので、JS がそのデータをどう使うかを決める役割です。実用的な例として、リストのアイテムをクリック可能に見せつつ、実際の遷移先を data-href に格納する形があります。実際の HTML は次のようになります：リンク。この場合、多くのサイトでは JavaScript で click イベントを拾い、 el.dataset.href の値を使って移動先を決めます。簡単なサンプルとしては、 document.querySelectorAll('[data-href]').forEach(el => { el.addEventListener('click', function(e) { window.location.href = this.dataset.href; }); }); のようなコードです。こうした実装をする時は、アクセシビリティと SEO を意識しましょう。まず href 属性を残しておくことで、スクリーンリーダーが正しくリンクとして認識し、検索エンジンにも通常のリンクとして理解されます。data-href に頼りすぎて href が空の状態になると、リンクとしての意味が薄れてしまいます。結論として data-href はデータを柔軟に扱える強力な手段ですが、基本は href を使い、データ属性は補助的情報として JS の挙動を決める用途に留めるのが、初心者にも安全で SEO にも優しい設計です。
javascript href とは: javascript href とは、HTMLのリンクを作るときに使う href 属性と、javascript: という特殊な URL スキームを組み合わせた話題です。通常、href にはリンク先の URL やページ内のアンカー（#section など）を指定します。ところが href に javascript: で始まるコードを入れると、リンクをクリックしたときにそのコードが実行されます。例として挨拶のように書くと、クリック時にブラウザがアラートを表示します。この書き方は古く、現在のウェブ開発ではおすすめされません。理由は、JS が無効になっていると動かない、キーボード操作やスクリーンリーダーでの accessibility が難しくなる、外部からのコード注入のリスクがある、などです。代わりの安全な方法として、リンク自体は普通の URL にしておき、クリック時の動作を外部の JS ファイルやページ内のスクリプトでイベントリスナーとして設定するやり方があります。例として挨拶というリンクを用意し、以下の JS で処理します。このようにすることで、リンクとしての機能とJavaScriptの動作をきちんと分けられ、アクセシビリティとセキュリティが向上します。 bookmarklet のようにブラウザ上で小さなコードを実行する場合を除き、サイト内の開発では javascript: の乱用は避けましょう。

hrefの同意語

href: HTMLのアンカータグ()で、リンク先のURLを指定する属性名
href属性: アンカータグの属性の一つで、リンク先URLを設定する属性
リンク先URL: リンクが指し示す先のURL（ページの住所）
リンクURL: リンク先のURLの言い換え
ハイパーリンク参照先: ハイパーリンクが参照する先のURL
参照先URL: リンクが参照するURL
宛先URL: リンクの宛先となるURL
アンカータグURL: アンカータグが指定するURL
ハイパーリンクURL: ハイパーリンクとして扱われるURL
アンカーURL: アンカー（タグ）の参照先URL
URL参照先: リンク先として参照されるURL

hrefの対義語・反対語

hrefあり: アンカータグの href 属性に有効なURLが設定されている状態。リンクとして機能し、遷移先へ飛ぶ。
hrefなし: アンカータグに href 属性が設定されていない状態。リンクとして機能せず、クリックしても遷移しない。
空リンク: href が空文字や '#' のように遷移先が未設定のリンク。見た目はリンクだが実際の遙走先が不明瞭。
ノーフォローリンク: rel='nofollow' が設定されたリンク。検索エンジンがこのリンクを辿らず、リンクジュを渡さない意図を示す。
ドーフォローリンク: rel='dofollow' が設定されたリンク。検索エンジンがこのリンクを辿ることを前提とする、nofollowの反対の意味合いで用いられることがある。
内部リンク: 同一サイト内の別ページへ向かうリンク。内部SEOを高める目的で活用されることが多い。
外部リンク: 別サイトへのリンク。信頼性や関連性を示す外部参照として使われることがある。
相対URLリンク: 現在のページを基準に遷移先を指定するリンク。URLが相対的に記述される。
絶対URLリンク: http(s)://から始まる完全なURLを指定したリンク。どのドメインでも遷移先が特定される。
自己リンク: 自分のサイト内の別ページを指すリンク。自己参照的なリンクとして使われることがある。