HTML外部リンクの作り方を完全解説！aタグで別サイトへ安全に移動する基本
生徒
「ホームページを作っていると、他のサイトに移動する文字がありますよね。あれはどうやって作るんですか？」
先生
「それはHTMLのaタグを使って作る外部リンクです。クリックすると別のWebサイトへ移動できます。」
生徒
「自分のページから他の会社のサイトに飛ばすのもできますか？」
先生
「もちろんできます。基本の書き方から、安全で正しい使い方まで順番に見ていきましょう。」
1. HTMLの外部リンクとは何か
HTMLの外部リンクとは、自分が作成しているWebページから、別のWebサイトや別のドメインのページへ移動するための仕組みです。インターネットはたくさんのページがつながってできていますが、そのつながりを作る役割を持つのがリンクです。特に外部リンクは、会社の公式サイトや参考情報、地図サービスなどへ案内するときによく使われます。
初心者の方は「リンク＝クリックできる文字や画像」と考えると分かりやすいです。リンクがあることで、見る人は迷わず次の情報へ進むことができます。
2. aタグの基本的な役割
aタグは、HTMLでリンクを作るための基本タグです。aは「アンカー」と呼ばれ、ページとページをつなぐ目印のような役割を持ちます。aタグで囲まれた文字や画像は、クリックできる状態になります。
リンク先の住所を指定するためにhrefという属性を使います。属性とは、タグに追加の情報を与えるものです。hrefには、移動したいWebページのURLを書きます。
<a href="https://example.com">公式サイトはこちら</a>
3. 外部リンクの正しい書き方
外部リンクを作るときは、URLを最初から最後まで正しく書くことが大切です。httpsから始まるURLは、インターネット上の正確な住所のようなものです。一文字でも間違えると、ページが表示されません。
また、リンクの文字は「こちら」だけでなく、何のページへ移動するのかが分かる表現にすると親切です。これはSEO対策としても効果があります。
<p>詳しい情報は <a href="https://example.com/about">会社概要ページ</a> をご覧ください。</p>
4. 別タブで外部サイトを開く方法
外部リンクをクリックしたときに、今見ているページを残したまま、新しいタブで開きたい場合があります。そのときはtargetという属性を使います。targetに_blankと書くと、新しいタブでページが表示されます。
初心者の方は「今のページを閉じずに、別の窓で開く」と考えると理解しやすいです。
<a href="https://example.com" target="_blank">外部サイトを新しいタブで開く</a>
5. 外部リンクとセキュリティの考え方
外部リンクを新しいタブで開くときは、安全面も意識する必要があります。relという属性を使うことで、リンク先との不要な情報のやり取りを防ぐことができます。これは、見ている人を守るための設定です。
少し難しく感じるかもしれませんが、「安全のためのおまじない」だと思って一緒に設定しておくと安心です。
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
安全に外部サイトへ移動
</a>
6. 画像を使った外部リンクの作り方
文字だけでなく、画像をクリックして外部サイトへ移動させることもできます。お店のロゴやバナー画像によく使われる方法です。aタグの中にimgタグを入れることで、画像全体がリンクになります。
初心者の方は「写真にリンクをかぶせる」とイメージすると分かりやすいです。
<a href="https://example.com" target="_blank">
<img src="/img/sample150-100.jpg" alt="サンプルサイト">
</a>
7. 外部リンクでよくある失敗
外部リンクで多い失敗は、URLの書き間違い、リンク先が存在しないページになっていること、リンクの文字が分かりにくいことです。特にコピーしたURLの前後に余計な文字が入ると、正しく動きません。
また、外部リンクばかり増やしすぎると、見る人が迷ってしまうこともあります。本当に必要な場所だけに使う意識が大切です。
8. SEOを意識した外部リンクの考え方
SEO対策の面では、信頼できる外部サイトへ適切にリンクすることが重要です。内容と関係のあるページへ自然につなぐことで、ページ全体の分かりやすさが高まります。
リンクの文字には、移動先の内容が想像できる言葉を使いましょう。検索エンジンだけでなく、初めて見る人にも親切なページになります。
「意味」がわかればWebは楽しい！現役エンジニアが教える、挫折しないためのHTML構造化入門
「Webの仕組み」を正しく操る。HTML5でプロフェッショナルな情報設計の第一歩を。
本講座では、単なるタグの暗記ではなく、「検索エンジンやAIに正しく伝わる情報の構造化」という本質的な技術を学びます。モダンWebの土台であるHTML5を通じて、将来的にWebデザイナーやフロントエンドエンジニアを目指すための「稼げる基礎力」を最短距離で身につけます。
具体的なワークショップ内容と環境
【つくるもの】
自己紹介やポートフォリオの土台となる「構造化されたWebページ」を作成します。見出し、段落、リスト、リンク、画像配置など、商用サイトでも必ず使われる「セマンティックなマークアップ」をゼロから体験してください。
【開発環境】
世界中のプロが愛用するVisual Studio Code (VS Code)を使用します。Emmet（高速入力機能）の設定から、HTMLの文法ミスを自動チェックする拡張機能まで、現場基準の効率的な環境を一緒に構築します。
この60分で得られる3つの武器
Googleから高く評価されるタグの選び方を理解し、検索上位を狙えるサイト構造の作り方を学びます。
プロが使うショートカットや自動補完機能を習得し、タイピングの手間を最小限にする技術を体得します。
画像への代替テキストや適切な階層構造など、誰にとっても使いやすい「優しいWeb」の作り方を伝授します。
※本講座は、将来的にWebデザイナー、コーダー、フロントエンドエンジニアを目指す未経験者のためのエントリー講座です。「モクモク」独自のマンツーマン形式により、コードを1行書くたびに生まれる疑問をその場で解決します。
現役エンジニアが教えるHTML入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
