HTMLのhref属性とは？aタグの使い方やhref="#"の意味まで解説

HTMLでリンクを作成する際、href属性の使い方を正しく理解することは非常に重要です。基本的な使い方を押さえておけば、外部サイトへの遷移やページ内リンク、メールや電話への誘導などさまざまな場面で柔軟に活用できます。本章では、Web制作の現場でよく使われるhrefの記述パターンを、初学者でも理解しやすいよう具体例とともに解説します。

外部リンクを設定する

外部サイトへリンクを設定する場合は、href属性に「絶対パス（フルURL）」を指定します。

絶対パスとは、スキーム（https://など）から始まる完全なURLのことで、Webブラウザが正確にリンク先を特定できるようになります。外部リンクや他ドメインへの遷移に最適です。

<a href="https://www.example.com">公式サイトはこちら</a>

このように指定すると、クリックすると「https://www.example.com」へ移動します。

外部リンクを設置する際は、URLを省略せず絶対パスで指定するのが基本です。

同じページ内へのリンク（アンカーリンク）

同一ページ内の特定の場所へ移動させたい場合、hrefに「#id名」を指定します。

アンカーリンクは、長いページ内で特定の位置に一瞬でジャンプできる便利な手法です。HTML内の任意の要素にid属性を設定し、そのidをhrefに指定することで実現します。

<a href="#contact">お問い合わせはこちら</a>

<h2>お問い合わせ</h2>

</section>

このように設定することで、リンクをクリックするとページ内の「お問い合わせ」セクションへ移動します。

アンカーリンクは、ユーザーの利便性向上やUX改善にも役立つ機能です。

メールアドレスや電話番号へのリンク

href属性では、Webページから直接メール送信や電話発信のアクションを起こすリンクも設定可能です。

メールソフトや電話アプリと連携するリンクは、問い合わせフォームを設けずにユーザーとつながる手段として便利です。mailto:やtel:という特別なスキームを使います。

<a href="mailto:info@example.com">メールでお問い合わせ</a>

<a href="tel:0123456789">今すぐ電話する</a>

メールリンクではデフォルトのメールソフトが起動し、電話リンクはスマートフォンなどで通話画面が開きます。

mailtoやtelは、スマートフォン閲覧時の利便性を高める工夫として効果的です。

リンク先を新しいタブで開くには

リンクを新しいタブで開きたい場合は、aタグにtarget="_blank"属性を追加します。

ユーザーの閲覧中ページを維持しつつ、外部リンクを別タブで表示したいときに有効です。特に、自社サイトから外部ページへ遷移する場合などに重宝されます。

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">外部サイトを開く</a>

この例では、リンク先が新しいタブで開かれ、同時にrel="noopener"を指定することでセキュリティ面の対策も講じています。さらに、リンク先に遷移元（自サイト）の情報を送らないようにするrel="noreferrer"も併せて指定すると、よりセキュリティとプライバシーが向上します。

target属性はユーザー体験の向上だけでなく、セキュリティやSEOへの配慮も併せて検討することが重要です。

なお、最近の主要なブラウザでは、target="_blank"を指定すると自動的にrel="noopener"と同様の保護機能が働くようになっていますが、古いブラウザへの対応や意図を明確にするために明記することが推奨されます。

HTML入門【サンプル付】CSSとの関係やよく使うタグ一覧＆開き方を解説

【HTML】フォントサイズの基本｜px・em・remの違いやサイズが変わらない場合の対処法を解説

3.よく使われるhrefの書き方と意味

href属性は、Webサイトにおけるリンクの基本構造を担う重要な要素ですが、その書き方によって動作や意味が大きく変わることがあります。href="#"のような記述は、仮リンクとしてよく使われる一方で、意図しない挙動やユーザビリティの低下を招く可能性もあります。本章ではよく見かけるhrefの記述パターンとその意味、JavaScriptと連携した使い方などについて、具体例を交えながら丁寧に解説します。

<a href="#">リンク</a>の意味と注意点

<a href="#">リンク</a>は「リンク先を指定せず、ページの先頭に戻る」という意味を持ちますが、本来の用途ではないため乱用には注意が必要です。

「#」はHTMLのアンカー（ページ内の特定位置）を指す記号で、hrefに「#」のみを指定すると、ページ先頭にスクロールする動作となります。ただし本来リンク先が未定な状態や、JavaScriptによる動作を待つ仮リンクとして使われるケースも多く、アクセシビリティやSEOの観点では好ましくありません。

<a href="#">クリックして詳細を表示</a>

このような記述を多用すると、リンクとしての意味が不明瞭になり、ユーザーや検索エンジンにとって適切な導線を提供できなくなります。

特にスクリーンリーダーを使用するユーザーにとっては、href="#"のリンクは「リンク」として認識されるものの、実際の遷移先が不明なため混乱を招きます。また、キーボードナビゲーションでEnterキーを押した際に予期しないページトップへの移動が発生する可能性があります。

href="#"は便利ですが、最終的には具体的なリンク先を設定し、仮リンクのまま放置しないことが大切です。

hrefが「#」だけの場合の動作（ページが移動しない）

hrefに「#」だけを指定すると、ページ遷移は起きず、ページのトップにスクロールされます。

これは「現在のページ内の特定位置（id）」にジャンプする仕様に従った動作です。ただし、リンク先が存在しない#単独では、ジャンプ先が見つからずトップに戻る結果になります。また、JavaScriptの処理トリガーとして用いる際にも副作用に注意が必要です。

<a href="#" onclick="alert('クリックされました'); return false;">通知を表示</a>

この例では、JavaScriptの処理が実行された後、return false;によってデフォルトのリンク動作（先頭へのジャンプ）を防止しています。

href="#"は動作が不明確になりやすいため、アンカーリンクやJavaScript処理と併用する場合は十分に制御する必要があります。

JavaScriptでhrefの動作を制御するケース

JavaScriptを使えば、href属性を持つリンクに対してクリック時の挙動を自由にカスタマイズできます。

動的なWebアプリケーションやSPA（シングルページアプリケーション）では、画面遷移を発生させずに特定の処理を実行したい場面がよくあります。その際、見た目はリンクでも、実際にはJavaScriptが機能の中心となります。

<a href="#" id="openModal">詳細を見る</a>

document.getElementById("openModal").addEventListener("click", function(event) {

event.preventDefault(); // デフォルトのリンク動作を無効化

// モーダル表示の処理など

});

</script>

このようにevent.preventDefault()を使うことで、クリックしてもページ遷移させず、任意のJavaScript処理に置き換えることができます。

href属性とJavaScriptを組み合わせることで、よりインタラクティブなUIを構築できますが意図しない挙動を避けるためにも、デフォルト動作の制御は必須です。

なお、JavaScriptでのみ動作するリンクを作成する場合は、<button>要素を使用することが推奨されます。これによりセマンティックな意味が明確になり、アクセシビリティも向上します。

<button type="button" onclick="openModal()">詳細を見る</button>

また、どうしてもリンクの見た目が必要な場合は、href="javascript:void(0)"を使用する方法もあります。

<a href="javascript:void(0)" onclick="openModal()">詳細を見る</a>

4.よくあるhrefの記述ミスと対処法

href属性はシンプルに見える反面、記述方法を誤るとリンクが機能しなかったり、ユーザー体験やSEOに悪影響を及ぼしたりする可能性があります。相対パスと絶対パスの混同、href="#"の多用、hrefなしのaタグ使用などは初学者が陥りやすい落とし穴です。本章では、そうした典型的なミスとその対処法について、具体例を交えてわかりやすく解説します。

相対パス・絶対パスの間違い

リンク先が正しく表示されない原因として多いのが、相対パスと絶対パスの使い分けのミスです。

絶対パスはWeb全体の位置を示す完全なURLであり、相対パスは現在のファイルから見た位置関係を基に指定します。どちらを使うかはリンク先の構造や用途によって適切に選ぶ必要があります。間違えると「404エラー」や意図しないページに遷移する可能性があります。

例えば、外部サイトへは絶対パス、自サイト内リンクには相対パスを用いることが一般的です。

リンクが正しく機能しない場合は、パスの種類と階層関係を見直し、適切な形式で指定されているか確認しましょう。

「#」の多用によるアクセシビリティ低下

href="#"を多用すると、ユーザーの操作性やアクセシビリティに悪影響を及ぼすことがあります。

仮リンクとしての「#」はリンク本来の目的地が存在しないため、キーボード操作やスクリーンリーダーのユーザーにとって混乱を招きます。また、何も起きないリンクが多いと「リンクとして意味がない」と評価されることもあり、アクセシビリティとUXの両面で問題になります。

このようなケースでは、リンクではなく<button>要素を使用するか、意味のある遷移先を設定することが推奨されます。

仮リンクが必要な場合でも、スクリーンリーダーやキーボード操作に配慮し、リンクとしての意味が明確になるよう調整しましょう。

hrefなし・aタグだけ使った場合のリスク

aタグにhref属性を付けずに使用すると、リンクとして正しく機能せず、SEO・アクセシビリティ両面で悪影響があります。

hrefがないaタグは見た目がリンクでも、ユーザーにとって「どこにも行けないリンク」になります。検索エンジンも正しく評価できず、アクセシビリティ支援技術でも「無効なリンク」と判断される可能性があります。

また、hrefなしのaタグは以下のような具体的な問題を引き起こします。

タブキーでのフォーカスが当たらない（キーボードナビゲーション不可）
カーソルがポインターに変わらない（リンクとして認識されない）
スクリーンリーダーがリンクとして読み上げない
検索エンジンのクローラーがリンクとして認識しない

どうしてもアンカー要素として使用したい場合は、最低限href="#"を設定するか、以下のようにtabindex属性を追加する必要があります。

ただし、これは推奨される方法ではありません。

<a>詳細はこちら</a>

<a href="details.html">詳細はこちら</a>

上記のように、hrefがないリンクはクリックしても何も起きないため、ユーザーが混乱する原因になります。

aタグを使用する場合は、必ずhref属性を設定することを基本ルールとして徹底しましょう。

5.実務で役立つhref活用例

href属性は、基礎的なリンク作成だけでなく、実務の中で多様な目的に応じて活用されます。例えばページ内ナビゲーションの設計やサイト全体の回遊性を高めるためのメニューリンク、さらにはSPA（シングルページアプリケーション）での動的ルーティングなど、実務では応用的な使い方が求められます。本章では、Web制作の現場でよく使われるhrefの活用方法について、具体的なコード例とともに解説します。

ページ内ナビゲーションの設計

href属性を活用したページ内ナビゲーションは、ユーザーが目的の情報にすばやくアクセスできる導線として効果的です。

1ページ完結型のランディングページやFAQページ・サービス紹介ページなどでは、セクションごとにidを振っておき、目次などからスムーズにジャンプできる構造が好まれます。これはSEOに加え、UX（ユーザー体験）の向上にも直結します。

<ul>

</ul>

このように設計することで、ユーザーが迷わず必要な情報にたどり着けます。

ページ内ナビゲーションにhref属性を使うことで、利便性の高いページ構成が実現できます。

フッターやメニューのリンク構造

href属性を用いたフッターやグローバルメニューのリンクは、サイトの回遊性を高め、直帰率の改善にもつながります。

Webサイトでは、ナビゲーションメニューやフッターリンクがユーザーの導線をつくる基盤となります。すべての主要ページに適切なhrefを設定しておくことで、ユーザーが情報にたどり着きやすくなり、サイト全体の滞在時間も伸びやすくなります。

<a href="/about/">会社情報</a> |

<a href="/contact/">お問い合わせ</a> |

<a href="/privacy/">プライバシーポリシー</a>

</footer>

上記のように、明確なリンク構造をフッターに設けることで、検索エンジンにもサイト構造を適切に伝えることができます。

実務では、主要ナビゲーションへのhref設定が、ユーザー導線とSEOの両面で鍵を握ります。

SPA（シングルページアプリケーション）での使い方の注意点

SPAでは、hrefの使い方に注意しないと、SEOやブラウザ操作に問題を引き起こす可能性があります。

SPAでは、画面の遷移をJavaScript（主にルーティングライブラリ）で制御するため、hrefで指定されたリンクが正しく処理されないことがあります。またJavaScript未対応の環境では、リンクが機能しないこともあるため、フォールバック設計が重要になります。

<router-link to="/dashboard">ダッシュボード</router-link>

この場合、HTML的なhref属性は暗黙的に管理されており、JavaScriptでルーティングされます。検索エンジンに正しく認識させるには、SSR（サーバーサイドレンダリング）や適切なメタ情報の設定が必要です。

SPAでは、hrefの役割をJavaScriptと連携させる必要があり、設計段階からSEO・UX双方への配慮が求められます。

具体的には、以下の対策が重要です。

History APIを使用したURLの適切な管理
検索エンジン向けのサーバーサイドレンダリング（SSR）またはスタティックサイトジェネレーション（SSG）の実装
構造化データの適切な設定
サイトマップの生成と更新

JavaScriptとは？初心者にもわかりやすく何ができるかや歴史、基本的な文法を解説

6.hrefについてよくある質問

HTMLのhref属性はシンプルな記述でありながら、使い方を誤ると意図しない動作を引き起こすことがあります。初学者にとっては、「どんなURLが使えるのか」「#だけのリンクはなぜ動かないのか」といった疑問を抱く場面も少なくありません。本章では実際によく寄せられる質問を取り上げ、トラブル回避や理解の定着につながるよう、実例を交えながら丁寧に解説します。

href属性に使えるURLの種類は？

href属性には、HTTP/HTTPSのURLだけでなく、mailto・tel・ファイルパス・アンカーリンクなどさまざまな種類の値を指定できます。

href属性はHTML仕様上、リンク先の「場所」を指定するものです。そのため、ウェブページ（https://〜）だけでなくメール送信用のmailto:・電話発信用のtel:・ページ内リンクの#id・PDFなどのファイルパスなども指定可能です。

<a href="https://example.com">Webページ</a>

<a href="#section1">ページ内リンク</a>

<a href="/files/manual.pdf">PDFファイル</a>

用途に応じて正しいURL形式を選べば、href属性は非常に多機能なリンク手段として活用できます。

href="#"をクリックしても何も起きないのはなぜ？

href="#"では明確なリンク先が指定されていないため、ページの先頭に戻るか、場合によっては何も起こらないように見えます。

「#」はHTMLにおけるアンカー記号で、idが設定された要素にジャンプするために使われます。リンク先のidが存在しない、またはJavaScriptで何かを制御していない限り、実際の変化はほとんど見られません。

このリンクには実質的な遷移先がないため、ユーザーには「何も起きていない」と感じられます。

href="#"は仮リンクとして一時的に使う場合もありますが、本番ではリンク先を明確に設定しましょう。

aタグにhref属性を付けないとどうなる？

aタグにhref属性を付けないと、リンクとしての機能を果たさず、検索エンジンやユーザーにとって無意味な要素となります。

HTMLの仕様上、aタグはテキストや要素を「リンクにする」ためのタグであり、href属性がなければリンクの機能は働きません。そのため、SEOやアクセシビリティの観点でもマイナスになります。

<a>リンクのように見えるが機能しない</a>

<a href="/contact/">お問い合わせ</a>

aタグを使用する際は、必ずhref属性を併記して正しくリンクを設定するようにしましょう。

7.まとめ

Web制作において、href属性は最も頻繁に登場する基本タグのひとつです。

使い方を正しく理解し状況に応じて適切なリンク設計ができるようになれば、初心者から一歩抜け出し、実務に通用する力が身につきます。これを機に、HTMLのリンク構造を自信を持って使いこなせるようになりましょう。

本記事が皆様にとって少しでもお役に立てますと幸いです。

「フリーランスボード」は、数多くのフリーランスエージェントが掲載するITフリーランスエンジニア・ITフリーランス向けの案件・求人を一括検索できるサイトです。

開発環境、職種、単価、稼働形態、稼働日数など様々な条件から、あなたに最適なフリーランス案件・求人を簡単に見つけることができます。

単価アップを目指す方や、自分の得意なスキルを活かせる案件に参画したい方は、ぜひ「フリーランスボード」をご利用ください。

自身に最適なフリーランスエージェントを探したい方はこちらよりご確認いただけます。