HTMLで文字をクリックできるリンクにしたいときは、aタグを使います。ただ、hrefに何を書けばよいのか、同じサイト内と別サイトで書き方が変わるのか、最初は迷いますよね。
基本形は、<a href="リンク先URL">リンクの文字</a>です。この記事では、テキストリンク、画像リンク、新しいタブで開く方法、ページ内リンクまで、実際のコードと表示結果を使って解説します。
HTMLでリンクを貼る基本はaタグ
aタグは、別のページやファイル、同じページ内の位置などへ移動するためのHTML要素です。aはanchor（アンカー）の頭文字で、日本語ではアンカータグとも呼ばれます。
<a href="https://example.com/learn">HTMLの学習方法</a>href属性には移動先のURLを書き、開始タグと終了タグの間には画面へ表示するリンクの文字を書きます。hrefは「どこへ移動するリンクなのか」をブラウザへ伝える役割です。
上のコードをブラウザで開くと、「HTMLの学習方法」という青い下線付きの文字が表示されます。クリックすると、hrefに指定したページへ移動します。
HTMLタグの開始タグ・終了タグや属性の意味から確認したい場合は、次の記事も参考にしてください。
テキストリンクを作ってブラウザで確認する
まずは、リンクを追加する前のHTMLを用意します。まだaタグがないため、「HTMLの学習方法」は普通の文章として表示され、クリックしてもページは移動しません。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>リンクの練習</title>
</head>
<body>
<p>HTMLの学習方法</p>
</body>
</html>リンクにしたい文字をaタグで囲み、hrefへ移動先のURLを追加します。今回は説明用のURLとしてhttps://example.com/learnを使っています。
<body>
<p>
<a href="https://example.com/learn">HTMLの学習方法</a>
</p>
</body>ファイルを保存してブラウザを再読み込みすると、文字がリンクとして表示されます。実際のページでは、hrefを移動したいページの正しいURLへ置き換えてください。
HTMLファイルを保存したあと、ブラウザで表示する手順が分からない場合は、次の記事で確認できます。
リンク先URLの書き方は2種類
リンク先は、絶対URLまたは相対URLで指定します。別サイトへのリンクでは絶対URLを使い、同じサイト内では相対URLも使えます。
絶対URLはhttpsからすべて書く
絶対URLは、https://から始まる住所をすべて書く方法です。外部サイトへ移動するリンクは、基本的に絶対URLで指定します。
<a href="https://example.com/about/">サイトについて</a>相対URLは現在のページを基準に書く
相対URLは、同じサイト内のファイルやページを現在位置から指定する方法です。ドメイン部分を省略できるため、開発環境から本番環境へ移してもリンクを保ちやすくなります。
<!-- 同じフォルダにあるabout.htmlへ移動 -->
<a href="about.html">このサイトについて</a>
<!-- サイトのルートを基準に指定 -->
<a href="/contact/">お問い合わせ</a>about.htmlは現在のHTMLファイルと同じフォルダを基準にします。先頭が/の/contact/は、サイトの一番上の階層を基準にするルート相対URLです。
リンクを新しいタブで開く
現在のページを残したままリンク先を開きたい場合は、target="_blank"を追加します。通常は新しいタブで開きますが、ブラウザの設定によっては新しいウィンドウになる場合があります。
<a href="https://example.com/" target="_blank" rel="noopener">
参考サイト（新しいタブで開く）
</a>rel="noopener"は、新しく開いたページから元のページを操作できないようにする指定です。現在の主要ブラウザではtarget="_blank"に同等の保護が含まれますが、意図をコード上でも明確にできます。
新しいタブが突然開くと驚く利用者もいます。必要な場合だけ使い、リンクの文字に「新しいタブで開く」と添えると親切です。
画像にリンクを貼る
画像をクリックしたときに別ページへ移動させるには、imgタグをaタグで囲みます。
<a href="products.html">
<img src="images/product.jpg" alt="初心者向けHTML教材の商品ページ">
</a>画像がリンクの役割を持つ場合、altにはリンク先や操作の目的が分かる説明を書きます。画像を見られない状況でも、どこへ移動するリンクかを伝えられます。
同じページ内の見出しへ移動する
長いページでは、リンクをクリックして同じページ内の見出しへ移動できます。移動先に重複しないidを付け、hrefには#と同じ名前を書きます。
<a href="#contact">お問い合わせまで移動</a>
<h2 id="contact">お問い合わせ</h2>リンクをクリックすると、ブラウザはid="contact"が付いた見出しまでスクロールします。目次や「ページ上部へ戻る」リンクにも使える方法です。
リンクの文字は移動先が分かる内容にする
リンクの文字には、クリック後に何が表示されるのかを具体的に書きましょう。「こちら」や「ここをクリック」だけでは、前後の文章を読まないと移動先を判断できません。
<!-- 移動先が分かりにくい例 -->
詳しくは<a href="guide.html">こちら</a>
<!-- 移動先が分かる例 -->
<a href="guide.html">HTML初心者向け学習ガイド</a>分かりやすいリンク文字は、画面を流し読みする人やスクリーンリーダーの利用者に役立ちます。検索エンジンもリンク先との関係を理解しやすくなるため、短く具体的な表現を選びます。
内部リンク・外部リンク・被リンクの違い
リンクは、ページ同士の関係から内部リンク、外部リンク、被リンクに分けられます。コードはいずれもaタグが基本ですが、リンクの向きが異なります。
- 内部リンク：同じサイト内の別ページへ移動するリンク
- 外部リンク：自分のページから別サイトへ移動するリンク
- 被リンク：別サイトから自分のページへ向けて貼られたリンク
内部リンクは、読者が関連情報を続けて読める場所へ自然に置きます。外部リンクは、公式情報や根拠を補足するときに、信頼できるリンク先を選びましょう。
SEOだけを目的にリンクを増やすのではなく、読者の疑問を解決するかどうかを基準にしてください。内容と関係のないリンクを大量に置くと、かえってページが読みにくくなります。
リンクが動かないときの確認ポイント
リンクをクリックしても移動できない場合は、次の項目を順番に確認します。
aタグにhref属性があるか- URLを囲む引用符が半角の
"になっているか https://やファイル名を正しく書いているか- 開始タグと
</a>の対応が取れているか - 相対URLの基準となるフォルダ位置が合っているか
- HTMLファイルを保存してからブラウザを再読み込みしたか
hrefを省略したaタグは、通常のリンクとして機能しません。また、移動のためではない操作を作る場合は、href="#"で代用せずbuttonタグを使います。
まとめ
HTMLでリンクを貼る基本形は、<a href="リンク先URL">リンクの文字</a>です。外部サイトには絶対URL、同じサイト内では相対URLも使えます。
まずは短いテキストリンクを1つ作り、ファイルを保存してブラウザで確認してみてください。基本形を理解すれば、画像リンク、新しいタブ、ページ内リンクにも同じ考え方を応用できます。