問題
6リンクタグ(aタグ)を設定しよう
Webページを閲覧していると、多くのリンクが使われていることに気づくのではないでしょうか。
では、そのリンクはHTMLでどのように設定されているのでしょうか?
この問題では、Web制作に欠かせないリンクタグ(aタグ)の基本的な使い方を学習します。
仕組みを理解することで、正しくページ遷移を設定できるようになります。
HTMLの問題に挑戦しよう!
問題
「リンクタグ(aタグ)を設定しよう」
今回はリンクタグ(aタグ)を使って、指定したURLへ遷移するリンクを設定します。
Web制作において必須となるリンクタグ(aタグ)の基本構造を理解し、正しくリンクを設定できるようになりましょう。
aタグ(リンクタグ)を使って、指定したURLへ遷移するリンクを作成します。
下記のURLをリンクとして設定し、「忍者CODEはコチラ」というテキストで表示してください。
https://ninjacode.work/
作成したリンクをクリックし、正しくページ遷移できれば成功です。
リンクタグの基本的な構造と役割を理解しましょう。
期待する画面
解答と解説(リンクタグ(aタグ)を設定しよう)
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
HTMLでリンクを作成する際は、単にaタグでテキストを囲むだけでは動作せず、「href属性」とセットで使用する必要があります
aタグ(アンカータグ)は、ページ遷移を実現するための重要な要素であり、href属性にはリンク先のURL(絶対パス・相対パス)を指定します。
今回の問題では、指定されたURL(https://ninjacode.work/)をhref属性に設定し、開始タグと終了タグの間に記述したテキストが「リンク名」としてブラウザに表示されます。
このリンクテキストをクリックすることで、指定したページへ遷移する仕組みです。
また、aタグには他にもtarget属性(例:_blankで別タブ表示)などがあり、ユーザーの導線設計にも大きく関わります。
基本的な構造としては「タグ+属性+リンクテキスト」の3点を押さえることが重要です
リンクはWebページの回遊性やSEOにも大きく影響する要素なので、正しい書き方を理解しておきましょう。
補足
a はanchor(アンカー=錨)の略で、ページ同士をつなぐ役割を持つHTMLタグです。
href は「Hypertext Reference」の略で、リンク先のURLを指定する属性です。
リンクテキスト(アンカーテキスト)は、リンク先の内容が伝わる具体的な文言にすると、ユーザーにも検索エンジンにも分かりやすくなりSEO的にも有利です。
・別タブで開く方法も学びたい方:別タブで開くtarget_blankを設定しよう
・画像にリンクを設定したい方:aタグで様々なリンクを作成しよう
・HTMLの基礎から学びたい方:HTML入門講座
ポイント
リンクタグ(aタグ)の設定と使い方
リンクタグ(aタグ)は、Webページ同士をつなぐ重要なHTML要素です。
href属性にリンク先URLを指定し、アンカーテキストとして表示される文字を設定することでリンクが成立します。
リンクタグは単なる遷移機能ではなく、ユーザーの回遊性を高めると同時に、検索エンジンにページ構造や関連性を伝える重要な役割を持っています。
特にアンカーテキストに適切なキーワードを含めることでSEO評価が向上し、ページの評価にも影響します。
また実務では、ナビゲーションや内部リンクなどWebサイト全体の導線設計にも広く活用されます。
HTMLリンクタグに不安はありませんか?
リンクタグ(aタグ)の基本を理解したら、実際のWeb制作でどのように活用するかをさらに深めていきましょう。
忍者CODEでは現役エンジニアによる無料メンター相談を通じて、HTMLの書き方やSEOを意識した設計について直接質問できます。
独学でつまずきやすいポイントもすぐに解決できるため、効率よくスキルアップが可能です。まずは気軽に相談してみましょう。
→無料メンター相談はこちら