2026年4月16日
HTML リンクの作り方：aタグとは？
ウェブページでクリックすると別のページに移動できる「リンク」は、HTML リンクの作り方の基本中の基本です。
HTMLでリンクを作るには <a> タグ（アンカータグ）を使います。a は anchor（アンカー） の略で、「錨（いかり）」という意味です。ページとページをつなぎ止めるイメージです。
この記事では、aタグの基本から応用まで、コード例とともにわかりやすく解説します。
aタグの基本的な書き方
aタグは href 属性にリンク先のURLを指定します。
<a href="https://example.com">リンクのテキスト</a>▶ プレビュー
href は Hypertext REFerence の略で、「リンク先の場所」を指定する属性です。
外部サイトへのリンク
<a href="https://www.google.com">Googleで検索する</a>同じサイト内のページへのリンク
<!-- 同じフォルダ内のページ -->
<a href="about.html">自己紹介ページへ</a>
<!-- 上の階層のページ -->
<a href="../index.html">トップページへ</a>別タブで開くリンク（target属性）
外部サイトへのリンクは、別タブで開くようにするのが一般的です。target="_blank" を追加します。
<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
Googleを別タブで開く
</a>▶ プレビュー
💡 rel="noopener noreferrer" とは？
target="_blank" を使うときは、セキュリティのために rel="noopener noreferrer" を一緒に書くのがルールです。これにより、開いた先のページから元のページを操作されるリスクを防げます。
📖 詳しくはHTMLタグ一覧【よく使う20選】で解説しています。
ページ内リンク（アンカーリンク）
同じページの特定の場所に飛ぶリンクを ページ内リンク（アンカーリンク） といいます。長いページの目次などに使います。
<!-- リンク（飛び先のidを#で指定） -->
<a href="#section2">セクション2へ移動</a>
<!-- 飛び先（id属性をつける） -->
<h2 id="section2">セクション2</h2>メールリンク・電話リンク
メールアドレスや電話番号へのリンクも作れます。
<!-- メールリンク -->
<a href="mailto:[email protected]">メールを送る</a>
<!-- 電話リンク（スマホで電話アプリが開く） -->
<a href="tel:0120-000-000">電話する</a>👉 metaタグの書き方も参考にしてください。
画像をリンクにする
<a> タグの中に <img> タグを入れると、画像をクリックしてリンクに飛べます。
<a href="https://example.com">
<img src="banner.jpg" alt="バナー画像">
</a>🔥 HTML問題ドリルで実践してみましょう。
リンクの種類と使い分け
リンクにはいくつかの種類があります。それぞれの使い分けを覚えましょう。
外部リンク
他のウェブサイトへのリンクです。href属性に「https://」から始まる完全なURLを書きます。外部リンクにはtarget="_blank"を指定して、新しいタブで開くようにすることが多いです。元のページを残しておけるので、ユーザーが戻りやすくなります。
内部リンク
同じサイト内の別ページへのリンクです。href属性には相対パス（例：「about.html」や「/blog/」）を書きます。同じサイト内なので、新しいタブで開く必要はありません。
ページ内リンク（アンカーリンク）
同じページ内の特定の場所に飛ぶリンクです。移動先の要素にid属性をつけて、href属性に「#id名」と書きます。長いページで「目次」を作るときに便利です。
メールリンク
クリックするとメールアプリが開くリンクです。href属性に「mailto:メールアドレス」と書きます。お問い合わせページでよく使います。
リンクのアクセシビリティ
リンクを作るとき、アクセシビリティにも気を配りましょう。
ポイント1：リンクテキストを具体的にする
「ここをクリック」「こちら」のような曖昧なテキストは避けましょう。スクリーンリーダーはリンクテキストだけを読み上げることがあります。「HTMLの基礎を学ぶ」「料金プランを見る」のように、リンク先の内容がわかるテキストにしましょう。
ポイント2：色だけで区別しない
リンクを色だけで示すと、色覚に特性がある人には区別できないことがあります。下線をつけるなど、色以外の手がかりも用意しましょう。
ポイント3：新しいタブで開くことを伝える
target="_blank"で新しいタブを開く場合、「（新しいタブで開きます）」のように伝えると親切です。予告なく新しいタブが開くと、混乱するユーザーもいます。
リンクでよくあるミス
ミス1：href属性を書き忘れる
aタグにhref属性がないと、リンクとして機能しません。見た目は普通のテキストになります。
ミス2：パスの書き方を間違える
ファイル名のスペルミスや、フォルダの階層を間違えると、リンク切れ（404エラー）になります。リンクを作ったら、必ずクリックして動作確認しましょう。
ミス3：閉じタグを忘れる
aタグの閉じタグを忘れると、それ以降のテキストがすべてリンクになってしまいます。開始タグと閉じタグの対応を確認しましょう。
リンクはウェブの根幹をなす技術です。正しく使いこなせれば、ユーザーにとって使いやすいサイトを作れます。
まとめ
- ✅
<a href="URL">テキスト</a>でリンクを作る - ✅
target="_blank"で別タブで開く（rel="noopener noreferrer"も一緒に） - ✅
href="#id名"でページ内の特定の場所に飛べる - ✅
mailto:でメールリンク、tel:で電話リンクが作れる - ✅
<a>の中に<img>を入れると画像リンクになる
HTMLの基礎はHTML入門で復習できます。パスの書き方はHTMLのパスの書き方を参照してください。
あわせて読みたい記事
- HTMLとは？初心者向け解説 — HTML基礎に戻る
- HTMLのパスの書き方 — パスの書き方
- HTMLでアクセシビリティを高める方法 — リンクテキストのアクセシビリティ
- CSSのtext-decoration — リンクの下線スタイル
- CSSのhoverで動きをつける方法 — リンクのhoverエフェクト
- HTMLセマンティックタグ入門 — ナビゲーションのマークアップ