プロゲートの「リンク」の解説とよくあるミス

こんにちは、ひつじのジョージです。

大都会でプログラマーとして10年以上活躍しています。普段は会社員として働いていますが、個人でシステム、Webアプリケーションを複数運用しています。

コアラ
リンクがなぜaタグなの?
ひつじのジョージ
アンカー(anchor)の「a」だね。
出発点や到着点を意味するよ。

aタグは非常に多く使うHTMLタグです。
聞き慣れない、使い慣れていないタグや属性なのではじめのうちはよくミスもありますが、しっかりマスターしましょう。

よくあるミス
  • リンクURLが"(ダブルクォーテーション)で囲まれていない
  • href属性のタイプミス

「リンク」レッスンの答え

「リンク」レッスンの答えのHTMLコードは以下のとおりです。

<!-- https://prog-8.comへのリンクを作成してください -->
<a href="https://prog-8.com">Progateへ</a>

<!-- https://google.comへのリンクを作成してください -->
<a href="https://google.com">Googleへ</a>
コアラ
リンクができた時とても嬉しかったよ!
ひつじのジョージ
自分が書いたコードが思い通りに動くのは何年やってもうれしいことだよ。

「リンク」でよくあるミス

未経験のうちはリンクでもよくミスがあります。

使い慣れていないタグや属性が出てきますが、リンクは非常に多く使うHTMLタグです。

よくあるミス
  • リンクURLが"(ダブルクォーテーション)で囲まれていない
  • href属性のタイプミス
コアラ
href?
link属性だったらわかりやすいよ。
ひつじのジョージ
href属性の名前の由来は「hypertext reference」だと言われているよ。

よくあるミス1:リンクURLが"(ダブルクォーテーション)で囲まれていない

HTMLタグ内では"で囲むと文字と認識されます。

リンク先のURLは文字として認識してもらいたいので、URLを"で囲んでください。

<a href=https://google.com>Googleへ</a>

よくあるミス2:href属性のタイプミス

HTMLのaタグのリンクURLはhref属性に書きます。

hrefではなく「ref」や「link」と書いてしまわないように気をつけましょう。

<a ref="https://google.com">Googleへ</a>

<a link="https://google.com">Googleへ</a>

まとめ:aタグはよく使うタグ。しっかりマスターしよう!

リンクを作るaタグはとても良く使うHTMLタグです。
しかし、聞き慣れなかったり使い慣れないのではじめのうちはよくミスをします。

よくあるミス
  • リンクURLが"(ダブルクォーテーション)で囲まれていない
  • href属性のタイプミス

これらのミスに気をつけながらaタグを使ってみてください。

おすすめの記事