【HTML】aタグ（リンク）とは？基本的な属性や種類、使い方を解説

WEBページにハイパーリンクを設置するときに使う「aタグ」は、HTMLの基本中の基本。

ボタン、バナー、テキストにリンクを貼る——ここまでは、ほとんどの方がご存知だと思います。

ただ、aタグの使い道はそれだけではありません。電話、メール、ファイルのダウンロード。属性を組み合わせると、SEOやユーザー体験まで変えられる、意外と奥の深いタグです。

この記事では、aタグの基本、属性の種類、使い方、注意点までを2026年時点のSEO実務に合わせて整理します。

AI Overviewで検索結果が多様化した今、Googleはサイト内のリンク構造をこれまで以上に丁寧に見ています。内部リンクの質を支えるのは、結局のところ「正しいaタグ」。

「とりあえずリンクが貼れていればいい」から、ひとつ先に進みたい方は、ここからはじめていきましょう。

この記事の監修者（最終更新者）

株式会社EXIDEA 代表取締役社長

小川 卓真

SEO歴20年。2006年にSEOツールの開発企業を共同創業して以来、SEOを軸にデジタルマーケティングに従事。2013年に「株式会社EXIDEA」を設立。現在はEXIDEAの代表取締役社長として、Webメディア事業、マーケティングDX事業、オールインワンSEOツール「EmmaTools」の事業に携わる。
執筆者の詳しいプロフィールはこちら

動画でわかるaタグの全体像

記事の要点を先に音声で掴みたい方は、以下の動画をご覧ください。

aタグとは

aタグとは、HTMLでハイパーリンクを設置するためのタグ。

aタグで囲んだテキストや画像をクリックすると、指定したURLへ遷移する——これが基本動作です。

ただ、aタグの役割は「別ページへのリンク」だけではありません。属性をうまく組み合わせれば、メールソフトを開いたり、電話をかけたり、ファイルをダウンロードさせたりもできる。1つのタグで、これだけ多彩な使い道があります。

まずは、aタグの基本的な書き方から見ていきましょう。

aタグの基本的な書き方

aタグの基本構造は、「開始タグ<a>」と「終了タグ</a>」でテキストや要素を囲むだけ。

基本形は以下のとおりです。

<a href="リンクさせたいページや場所">テキストや画像</a>

「リンクさせたいページや場所」にはURLやページ内アンカー、「テキストや画像」にはクリックすると遷移する文字列や画像が入ります。

ここで気になるのが「href」という文字。これがaタグの属性のひとつです。属性を理解しないと、aタグの本当の使い道は見えてきません。

aタグの属性について

aタグには、hrefをはじめとする複数の属性を付与できます。

代表的な属性を、ひとつずつ見ていきましょう。

ハイパーリンク先のURLを指定するhref属性

href属性は、リンク先のURLを指定するもの。aタグを使うなら、まず外せない必須属性です。

href属性に入るURLは、絶対URLでも相対URLでもOKです。

絶対パスは、リンク先の完全なアドレス。相対パスは、現在のページから同じサイト内のリンク先までの相対的な位置を指定する書き方になります。

たとえば「<a href="https://www.aaa.com/bbb/">BBBを詳しく見る</a>」というリンク。

この場合、「https://www.aaa.com/bbb/」が絶対URL、相対URLなら「../bbb/」と書きます。

href属性が抜けていると、aタグそのものが「リンク先のないリンク」になって機能しません。記述漏れとURLの間違いには、最低限注意してください。

リンク先との関係性を示すrel属性

rel属性は、リンク先のページとの関係性を検索エンジンに伝えるためのものです。属性値には以下のような例が挙げられます。

たとえば「rel=nofollow」と記述すると、検索エンジンに対して「このリンク先はクローラーで巡回しなくてよい」と伝え、リンクジュース(SEO評価の譲渡)も発生しなくなります。

「rel=noopener」は新しいタブでリンク先を開く際のセキュリティ対策。値ごとに役割がはっきり違うので、用途に応じて使い分けましょう。

rel属性の使い分けは、検索エンジンへの伝え方を細かく制御する手段。SEO効果にも、サイトの信頼性にも直結します。

リンク先の表示方法を指定するtarget属性

target属性は、リンク先のページを「同じウィンドウやタブで開くか」「新しいタブで開くか」を指定する属性。

代表的な使用例を見ていきましょう。

「target_blank」を指定すると新しいウィンドウやタブでリンク先を開き、「target_self」だと現在のウィンドウやタブで遷移します。

別タブで開くと、ユーザーは元のページと比較しながら情報を確認できる——これがユーザビリティ向上に直結します。

ただし、外部リンクで target_blank を使う場合は、セキュリティ上 rel="noopener" をセットで付けるのが現代の基本動作です。

リンク先の文字コードを指定するcharset属性

charset属性は、リンク先ページの文字コードを検索エンジンに伝える属性。

ただし現代のWeb制作では、ほぼ出番のない属性でもあります。

HTML5以降ではcharset属性の使用は非推奨とされていますが、旧式のHTML文書ではまだ見かけることがあります。

charset属性を使うと、ブラウザはリンク先の文字コードを事前に把握できる——これでページの読み込み時間が多少短縮できます。

一方で、適切な文字コードを指定しないと、ページが文字化けする可能性も。使う場合は、リンク先のHTMLソースで文字コードを確認し、合致させる必要があります。

なお、現在のHTML5ではUTF-8が推奨されており、その他の文字コード指定は非推奨です。新規にWebページを作るなら、charset属性は不要と考えてOKです。

リンク先のファイルタイプを指定するtype属性

type属性は、aタグのリンク先メディアの種類をブラウザに伝える属性。

PDF、画像、HTMLなど、ファイル形式によって使い分けます。

たとえば「type="document/pdf"」なら、リンク先がPDFファイルだとブラウザに明示できます。この情報があれば、ブラウザはクリック時の動作を適切に予測できる仕組み。

type属性の指定は必須ではありませんが、リンク先が特殊なファイル形式の場合、または自動判定が難しい場面では効きます。

属性の整理が済んだので、ここからはaタグの「使い方」を見ていきましょう。

aタグの使い方

aタグの書き方と属性を押さえたところで、実際にどんな場面で使うのかを見ていきましょう。

他のページやサイトへのリンク

1つ目は、他のWebサイトやページへのリンク——いわゆる「ハイパーリンク」の基本用途です。

aタグを使えば、自社サイト内の他ページにも、外部サイトにもリンクを貼れます。

すでにaタグでリンクを設置しているのに、属性を何も与えていない——そんなケースを見かけることもあります。この機会に、上で紹介した属性のうち適切なものを追加しておくと、SEOとセキュリティの両面で効きます。

同一ページ内での指定した他の箇所へのリンク

2つ目は、同じページ内の別の箇所へジャンプさせるリンク——いわゆる「アンカーリンク」です。

ページ内の特定箇所にid属性を付け、aタグでリンクを貼れば、ユーザーをそこへワンクリックで移動できます。

長い記事で目次を作るとき、よくこの仕組みが使われています。

ページ内検索の手間が省けるので、ユーザー体験(UX)の向上に直結する。記事の冒頭に目次を置けば、読みたいセクションへ即移動できる仕組みが作れます。

たとえばページ内の見出しにリンクを貼るなら、以下のように記述します。

<h2 id="abc">この見出しにリンクさせる</h2>

<a href="#abc">指定した見出しへリンク</a>

指定メールアドレスが入力されたメールソフトを開く

3つ目は、メールソフトを起動するリンク。

href属性に「mailto:」+メールアドレスを書くだけで、クリックするとユーザーのメールソフトに宛先が自動入力された状態で開きます。

subjectパラメータを追加すれば、件名まで先に埋めておくことも可能。問い合わせフォームを設置しなくても、お問い合わせ導線を作れる便利なテクニックです。

<a href="mailto:info@aaa.co.jp?subject=お問い合わせ">お問合せはこちらをクリック</a>

これでWebページ上には「お問合せはこちらをクリック」というアンカーテキストが表示され、ユーザーは手間なくメール送信できます。

クリックすると電話がかかるリンク

4つ目は、電話発信のリンク。

自社サービスに強く興味を持ったユーザーの中には、「今すぐ詳しい話を聞きたい」と電話を希望する方もいます。

確度の高いユーザー向けに、ワンタップで電話がかかるリンクを設置しておくと、コンバージョン率が変わる——これは特にスマホ流入のBtoCで効きます。電話発信リンクの書き方は次のとおり。

<a href="tel:0123456789">お電話をご希望の方はこちらをクリック</a>

href属性に「tel:」+電話番号を書くだけ。スマートフォンで情報を探すユーザーにとっては、これ以上ない便利な機能です。当社の比較サイト「HonNe」でも、サービス紹介ページのモバイル版にはtelリンクを置くのが基本動作になっています。

資料などをダウンロードしてもらうリンク

5つ目は、ファイルダウンロード用のリンク。

自社のサービス資料、パンフレット、ホワイトペーパーなどをユーザーに配布したいときに重宝する使い方です。

<a href="/資料ファイルの保存先/">弊社商材のパンフレットをダウンロードする</a>

これを設定しておけば、ユーザーはクリックするだけで資料を開けます。download属性を付与すれば、自動ダウンロードも可能です。

ただし、自動ダウンロードを使う場合は、ファイルそのものが安全だと明示する工夫が必要。リンク文言で内容と容量を伝えるなど、ユーザーが安心してクリックできる導線づくりが大切です。

ここまで、便利なaタグの使い道を解説してきました。最後に、aタグを使うときの注意点も押さえておきましょう。

aタグを使用時の注意点

aタグは多彩に使える便利なタグですが、設定時に押さえておくべきポイントもいくつか存在します。

絶対パスと相対パスの使い分け

注意点の1つ目は、絶対パスと相対パスの使い分け。

絶対パスは、URL全体を指定する方法。どのページから書いても同じ場所を指すので、同一サイト内・外部サイトの両方に使えます。

相対パスは「現在のページからの相対的な位置」を指す書き方。同一サイト内のリンクには使えますが、外部サイトへのリンクには使えません。

外部リンクを貼るときは、必ず絶対パス——これだけは覚えておきましょう。

アンカーテキストにはキーワードを入れる

2つ目の注意点は、アンカーテキストにキーワードを入れること。

アンカーテキストとは、リンク先を示すテキストのこと。ここに検索ユーザーが使う可能性のあるキーワードを自然に含めると、ページがそのキーワードに関連していることを検索エンジンに伝えられ、SEO効果が期待できます。

ただし、キーワードの詰め込みは禁物。

「キーワードスタッフィング」と判定されると、逆にペナルティを受ける可能性があります。あくまで自然な日本語のなかで、必要なキーワードが入っている状態を目指すのが当社の基本動作です。

⇒アンカーテキストの設置方法と注意点を整理したい場合は、アンカーテキストとは？SEOへの影響や正しい設置方法、注意点についても是非ご覧ください。

画像リンクの場合はaltタグを入れる

3つ目は、画像にリンクを貼るときは必ずalt属性を設定すること。

altは、画像が何らかの理由で表示できないときに代替テキストを表示する役割を持ちます。

検索エンジンのクローラーは、画像が存在することは認識できても、画像の中身までは解析できません。altに画像の内容を表すテキストを入れておけば、Googleはその情報を理解でき、SEO効果も伸びます。

altのテキストには、画像の内容を正確に表す簡潔な説明を入れるのが基本。

キーワードを自然に含めるとSEOに有利ですが、ここでも詰め込みは禁物です。「画像の内容を端的に伝える文+必要に応じて関連キーワード」——この温度感がちょうどいいバランスです。

画像リンクの場合、altはアンカーテキストの代わりにも機能します。「ただの装飾」として捉えず、リンク先がわかる文言を入れる意識を持つと、効きが大きく変わります。

⇒alt属性の正しい設定方法と注意点は、alt属性（altタグ）とは？その役割や正しい設定方法を解説で詳しく整理しています。

aタグでよくある質問

aタグとアンカーテキストは同じものですか？

同じではありません。aタグはHTMLの構造を作るタグそのもので、アンカーテキストはaタグで囲まれたリンク文字列を指します。リンク先のURLを指定するのがaタグの役割、リンク先の内容を伝えるのがアンカーテキストの役割です。

外部リンクのaタグにはrel属性を必ず付けるべきですか？

セキュリティ・SEO上、外部リンクには rel="noopener" や場面に応じて rel="nofollow" を付与しておくのが安全です。特に新しいタブで開くリンク(target="_blank")には noopener が推奨されます。

aタグにキーワードを詰め込むとSEOに悪影響ですか？

はい。リンク先と関係のないキーワードを並べたり、同じ完全一致キーワードでリンクし続けたりするとスパム判定のリスクがあります。自然な日本語の流れの中で、リンク先の内容が伝わる文言にしましょう。

AI Overview時代でもaタグの最適化は意味がありますか？

意味があります。むしろ重要度は上がっています。AI Overviewは複数のページから情報を組み合わせて回答を生成するため、内部リンク構造が整理されたサイトのほうが、引用や関連表示の対象になりやすいと考えられます。

まとめ

aタグの基本、書き方、属性、使い方、注意点を解説してきました。

他のページへのリンクにとどまらず、aタグには電話、メール、ダウンロードなど多彩な使い道があります。属性を適切に与えれば、SEO効果もユーザー体験も一気に伸びる——ここがaタグの面白いところです。

自社サイトでaタグを使っているなら、このページの内容を参照しながら「正しいaタグ」に整理しておきましょう。

AI Overviewで検索結果が多様化した今、Googleは内部リンクの質をこれまで以上に丁寧に見ています。属性のひと手間が、最終的なサイト評価に直結する——これが2026年のSEOの現場感覚です。

そのほか、SEOで重要なHTMLタグは以下のページで詳しく解説しているので、あわせてご一読ください。