
aタグとは
aタグとは、テキストや画像などにハイパーリンクを設定することのできるHTMLのタグです。ハイパーリンクという言葉は、一度は聞いたことがあるのではないかと思いますが、マウスを載せるとポインターが変わってクリックすると違うページに切り替わるリンクのことを言います。
aタグを囲った部分をリンクとして扱うことができるため、複数の要素をまとめてリンクにしたり、画像自体をリンクに設定することができます。
SEOを考慮したaタグの書き方
aタグで設定したリンクの表示されているリンク名のことをアンカーテキストと言います。
Googleなどの検索エンジンでは、アンカーテキストの内容だけ見ればどのようなページへのリンクであるのかが理解できるような具体的で分かり易い記述が良いとされています。
アンカーテキストを意識してリンクを作成していくことで、検索エンジンの評価が上がり、より多くの人にアクセスしてもらいやすいサイトを作ることができます。
HTMLの問題に挑戦しよう!
以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの第一歩となるでしょう。
問題6:aタグを使ってリンクを設定しよう
aタグを使ってリンクを設定しましょう。
下記のURLをリンクに設定し、
「忍者CODEはコチラ」というリンク名で表示させてみましょう。
https://ninjacode.work/
ブラウザ上に表示されたリンクをクリックして
忍者CODEのトップページに遷移できれば成功です。
下記のURLをリンクに設定し、
「忍者CODEはコチラ」というリンク名で表示させてみましょう。
https://ninjacode.work/
ブラウザ上に表示されたリンクをクリックして
忍者CODEのトップページに遷移できれば成功です。
期待する画面

解答ソースコード
<a href="https://ninjacode.work/">忍者CODEはコチラ</a>
¥HTML¥
#忍者CODE無料問題集で活動を記録しよう
完了にする!
aタグを使ってリンクを作成する場合は、href属性と必ずセットで使います。
href属性の値には、Webページやファイルの場所などを指定します。
aタグの開始タグと終了タグの間に書くテキストがリンク名となります。
今回は指定されていた忍者CODEの公式URLをhref属性の値に指定し、
aタグの開始タグと終了タグの間に「忍者CODEはコチラ」を書けば完成です。