問題

6
HTML

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

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

HTMLの問題に挑戦しよう!

問題

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

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

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

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

期待する画面

解答の画像

解答と解説(aタグを使ってリンクを設定しよう)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

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

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

今回は指定されていた忍者CODEの公式URLをhref属性の値に指定し、
aタグの開始タグと終了タグの間に「忍者CODEはコチラ」を書けば完成です。

ポイント

aタグとは

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

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

SEOを考慮したaタグの書き方

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

さらにスキルアップしたい方は公式LINEから「HTML」と送信すると動画が見れます。

LINE登録して動画を視聴する
学習の事・キャリアの事、何でもOK!無料相談に申し込む