ログイン
問題6

aタグを使ってリンクを設定しよう

Webページを閲覧していると、数えきれないほどのリンクを見かけるのではないでしょうか。この問題では、HTMLを使ってWeb制作に欠かせないハイパーリンクの設置方法を学習していきます。是非チャレンジしてみましょう。

アイコン画像

本のアイコンaタグとは

aタグとは、テキストや画像などにハイパーリンクを設定することのできるHTMLのタグです。ハイパーリンクという言葉は、一度は聞いたことがあるのではないかと思いますが、マウスを載せるとポインターが変わってクリックすると違うページに切り替わるリンクのことを言います。

aタグを囲った部分をリンクとして扱うことができるため、複数の要素をまとめてリンクにしたり、画像自体をリンクに設定することができます。

本のアイコンSEOを考慮したaタグの書き方

aタグで設定したリンクの表示されているリンク名のことをアンカーテキストと言います。
Googleなどの検索エンジンでは、アンカーテキストの内容だけ見ればどのようなページへのリンクであるのかが理解できるような具体的で分かり易い記述が良いとされています。
アンカーテキストを意識してリンクを作成していくことで、検索エンジンの評価が上がり、より多くの人にアクセスしてもらいやすいサイトを作ることができます。

HTMLの問題に挑戦しよう!

以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの第一歩となるでしょう。

問題6:aタグを使ってリンクを設定しよう

aタグを使ってリンクを設定しましょう。

下記のURLをリンクに設定し、
「忍者CODEはコチラ」というリンク名で表示させてみましょう。
https://ninjacode.work/

ブラウザ上に表示されたリンクをクリックして
忍者CODEのトップページに遷移できれば成功です。

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <a href="https://ninjacode.work/">忍者CODEはコチラ</a>
¥HTML¥
            

コメントのアイコン解説

aタグだけでテキストを囲ってもリンクを作成することはできません。

aタグを使ってリンクを作成する場合は、href属性と必ずセットで使います。
href属性の値には、Webページやファイルの場所などを指定します。
aタグの開始タグと終了タグの間に書くテキストがリンク名となります。

今回は指定されていた忍者CODEの公式URLをhref属性の値に指定し、
aタグの開始タグと終了タグの間に「忍者CODEはコチラ」を書けば完成です。
ログインして解答を見る
HTMLを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる