【完全保存版】HTMLでリンクを作成する方法｜aタグの基本からリンク設定の注意点まで初心者向けに解説

Webページを作るうえで欠かせない要素のひとつがリンクです。
ページ移動や外部サイトへの誘導など、リンクはWebの基本機能とも言えます。

この記事では、「html リンク」で検索した初心者の方に向けて、
HTMLでリンクを作成する方法を基礎から実践までわかりやすく解説します。

HTMLのリンクとは何か

HTMLのリンクとは、クリックすると別のページや場所へ移動できる仕組みです。
リンクは a タグ（アンカータグ）を使って作成します。

<a href="https://example.com">リンクはこちら</a>

この1行で、クリック可能なリンクを作ることができます。

aタグの基本構文

HTMLでリンクを作るときの基本形はこちらです。

<a href="リンク先URL">表示する文字</a>

各要素の意味

a：リンクを作るタグ
href：リンク先のURLを指定
表示する文字：クリックされるテキスト

href がなければ、リンクとして機能しません。

内部リンクと外部リンクの違い

HTMLのリンクには、大きく分けて2種類あります。

内部リンクの作り方

同じサイト内のページへ移動するリンクです。

<a href="/about.html">会社概要はこちら</a>

内部リンクの特徴

サイト内の回遊性が高まる
SEO評価の向上につながる
相対パスがよく使われる

外部リンクの作り方

別のサイトへ移動するリンクです。

<a href="https://example.com">外部サイト</a>

外部リンクでは、URLをフルで指定するのが基本です。

新しいタブでリンクを開く方法

リンクをクリックしたとき、新しいタブで開きたい場合は
target 属性を使います。

<a href="https://example.com" target="_blank">外部サイト</a>

注意点

外部リンクでよく使われる
ユーザーの離脱を防ぎやすい

ページ内リンク（アンカーリンク）の作り方

同じページ内の特定の位置へ移動するリンクも作れます。

リンク先の指定

<h2 id="section1">セクション1</h2>

リンクの作成

<a href="#section1">セクション1へ移動</a>

長いページでは特に便利な方法です。

画像にリンクを設定する方法

テキストだけでなく、画像にもリンクを設定できます。

<a href="https://example.com">
  <img src="image.jpg" alt="サンプル画像">
</a>

バナーやサムネイルによく使われます。

リンクが動作しないときのよくある原因

hrefの指定ミス

URLの入力ミス
相対パスの指定間違い

ファイルが存在しない

リンク先ファイルがない
ファイル名の大文字・小文字違い

#（ハッシュ）の付け忘れ

<a href="section1"> × </a>
<a href="#section1"> ○ </a>

HTMLリンクを作成するときの注意点

リンク文字は分かりやすくする

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

「こちら」だけでなく、内容が分かる文字がおすすめです。

リンクを貼りすぎない

多すぎると読みにくくなる
SEO評価が分散する可能性がある

よくある質問

aタグは入れ子にできますか

aタグの中に別のaタグは入れられません。
HTMLの仕様上、無効な構造になります。

CSSでリンクの色を変えても大丈夫ですか

問題ありません。
CSSでデザインを調整するのが一般的です。

まとめ

HTMLでリンクを作成するには、a タグを正しく使うことが重要です。

リンクは a タグで作る
内部リンクと外部リンクを使い分ける
target属性で新しいタブ表示が可能
ページ内リンクも活用できる

「html リンク」で検索した方は、
まず aタグの基本構文を正しく理解すること から始めてみてください。
リンクを使いこなせるようになると、Webページの利便性が大きく向上します。

【完全保存版】HTMLでリンクを作成する方法｜aタグの基本からリンク設定の注意点まで初心者向けに解説