aタグの使い方｜リンクの書き方・target属性・rel属性を徹底解説

この記事でわかること

結論を先に書きます

aタグは、クリックで別のページや場所に移動するリンクを作るHTMLタグです。書き方の基本は href でリンク先を指定し、開始タグと終了タグの間に表示テキストを入れる——これだけ。

ただし実務で押さえるべきポイントは2つあります。1つは==target="_blank" には必ず rel="noopener noreferrer" をセットで書く==こと。もう1つは、リンクテキストを「こちら」ではなくリンク先がわかる具体的な言葉にすることです。

aタグはHTMLの中でも使用頻度が高い基本タグです。HTML全体の位置づけから知りたい方はHTMLとは何かの解説を、ほかのタグもまとめて確認したい方はHTMLタグ一覧をあわせてご覧ください。

aタグとは？リンクを作る基本タグ

<a> タグはHTMLのアンカータグ（リンクタグ）です。クリックすると別のページや、同じページ内の別の場所へ移動するリンクを作ります。

書き方の基本形は次のとおりです。href 属性にリンク先のURLを指定し、開始タグと終了タグの間に表示するテキストを入れます。

<a href="リンク先URL">リンクテキスト</a>

「a」は anchor（アンカー＝錨）の頭文字です。文書のある地点と別の地点を結びつける、という意味でこの名前が付いています。

aタグの基本的な書き方（外部リンク・内部リンク）

リンク先によって、hrefに入れる値が変わります。サイト外へのリンクと同じサイト内へのリンクの2パターンを押さえれば十分です。

外部リンク（別サイトへのリンク）

別のサイトへのリンクは、https:// から始まる完全なURL（絶対パス）を指定します。

<a href="https://example.com">example.comへ移動</a>

内部リンク（同じサイト内のページへ）

同じサイト内のページへは、相対パスで書くのが一般的です。サイトのドメインが変わっても壊れにくいためです。

<!-- 絶対パス --> <a href="https://example.com/html-basics/">HTML基礎ページへ</a>




<!-- 相対パス（同じサイト内で推奨） --> <a href="https://example.com/html-basics/">HTML基礎ページへ</a> <a href="../contact/">お問い合わせへ</a>

相対パスは「現在のページから見た位置」で指定します。../ は1つ上の階層を表します。HTMLの階層構造に不安があればHTMLの基本構造の解説も参考になります。

target属性｜リンクを別タブで開く

外部サイトへのリンクは、別タブで開くのが一般的なUX（使い勝手）です。これを制御するのが target 属性で、target="_blank" を付けると新しいタブで開きます。

<a href="https://example.com" target="_blank">別タブで開く</a>

targetには次の値が指定できます。実務でよく使うのは _blank です。

target値	動作
_self	同じタブで開く（デフォルト）
_blank	新しいタブで開く
_parent	親フレームで開く
_top	最上位ウィンドウで開く

同じサイト内のページは _self（指定なし）で同じタブ、外部サイトは _blank で別タブ——という使い分けが基本になります。

rel属性｜target=”_blank”のセキュリティ対策

target="_blank" を使うときは、==必ず rel="noopener noreferrer" をセットで指定==してください。これはセキュリティ上、外せないポイントです。

<a href="https://example.com" target="_blank" rel="noopener noreferrer">   外部サイトへ（安全なリンク） </a>

なぜrel=”noopener”が必要か

rel="noopener" がないと、開いた先のページから元のページを操作できてしまうセキュリティリスク（タブナビング攻撃）があります。外部リンクには習慣として必ずセットで書きましょう。

relには用途別に次の値があります。アフィリエイトや広告リンクでは sponsored や nofollow も使います。

rel値	意味
noopener	開いたページから元ページへのアクセスを防ぐ
noreferrer	リファラー（参照元）情報を送らない
nofollow	検索エンジンにリンクを評価させない
sponsored	広告・スポンサーリンクであることを示す

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

同じページ内の特定の場所へジャンプするリンクです。ジャンプ先に id 属性を付け、リンク側で href="#id名" と指定します。

<!-- リンク側 --> <a href="#section2">セクション2へジャンプ</a>




<!-- ジャンプ先（id属性を設定） --> <h2 id="section2">セクション2</h2>

目次の作成や、「ページトップに戻る」ボタンによく使われます。

<!-- ページトップに戻る --> <a href="#top">ページトップへ</a>

メールリンク・電話リンクの書き方

hrefに mailto: や tel: を指定すると、メールソフトや電話アプリを起動するリンクになります。

メールリンク（mailto:）

クリックするとメールソフトが起動します。件名や本文をあらかじめ入れておくこともできます。

<a href="mailto:info@example.com">メールを送る</a>




<!-- 件名・本文を指定する場合 --> <a href="mailto:info@example.com?subject=お問い合わせ&body=お名前：">   件名付きメールを送る </a>

電話リンク（tel:）

スマートフォンでクリックすると電話アプリが開きます。実店舗サイトやLPで効果的です。

<a href="tel:0120-000-000">0120-000-000</a>

画像・ボタンをリンクにする

aタグはテキストだけでなく、画像やボックス要素も囲んでリンクにできます。

画像をリンクにする

<a> で <img> を囲むだけです。バナーやサムネイルのリンクに使います。imgタグ自体の書き方はimgタグの使い方で詳しく解説しています。

<a href="https://example.com">   <img src="banner.jpg" alt="バナー：サービス紹介"> </a>

ボタンをリンクにする

div や span を <a> で囲み、CSSでボタン風に装飾します。

<a href="https://example.com/contact/" class="btn-primary">   無料相談はこちら </a>

ダウンロードリンク（download属性）

クリックでファイルをダウンロードさせたい場合は download 属性を使います。ファイル名を指定して保存させることもできます。

<a href="https://example.com/files/sample.pdf" download>   PDFをダウンロード </a>




<!-- ファイル名を指定する場合 --> <a href="https://example.com/files/sample.pdf" download="サービス資料.pdf">   サービス資料をダウンロード </a>

aタグのアクセシビリティとCSSスタイリング

ここまでが書き方の基本です。仕上げとして、誰にとっても使いやすいリンクにするための注意点と、見た目の調整方法を整理します。

リンクテキストは具体的に書く

リンクテキストは、リンク先の内容がわかる言葉にします。「こちら」「詳しくはこちら」というテキストは、アクセシビリティ上NGです。

<!-- × わかりにくい --> <a href="https://example.com/about/">こちら</a>をクリック




<!-- ○ リンク先の内容がわかる --> <a href="https://example.com/about/">会社概要ページ</a>を見る

スクリーンリーダーはリンクテキストだけを抜き出して読み上げることがあります。「こちら」だけ読み上げられても、どこへ飛ぶリンクなのか伝わりません。SEOの観点でも、リンクテキストはページの内容を示すヒントになります。

aタグのCSSスタイリング

リンクの色や下線はCSSで自由に変えられます。下線を消したり、マウスを乗せたとき（ホバー時）だけ下線を出す、といった調整が定番です。CSSの基礎はCSSとは何かの解説を参照してください。

/* デフォルトのスタイルをリセットしてカスタマイズ */ a {   color: #0066cc;   text-decoration: none;   /* 下線を消す */ }




a:hover {   color: #004499;   text-decoration: underline;  /* ホバー時に下線を表示 */ }



/* ボタン風リンク */ .btn {   display: inline-block;   padding: 12px 24px;   background-color: #0066cc;   color: #fff;   border-radius: 4px;   text-decoration: none; }

よくある質問

aタグについて、初心者の方からよく受ける疑問をまとめました。

まとめ：aタグの書き方を用途別に整理

最後に、この記事の要点を用途別に整理します。

aタグはHTMLの中でも最も使用頻度が高いタグです。特に target="_blank" のセキュリティ対策（rel="noopener noreferrer"）は忘れずに実装しましょう。

リンクと並んでよく使う基本タグは、imgタグ（画像）・tableタグ（表）・brタグとpタグ（改行・段落）です。あわせて確認すると、HTMLの基本がひと通り身につきます。