HTMLの要素ハイパーリンクを現役デザイナーが解説【初心者向け】
初心者向けにHTMLの要素ハイパーリンクについて解説しています。aタグによるページ遷移の基本の書き方とその構造について説明します。何度も使用することになるので、仕組みも含めて理解しておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLの要素ハイパーリンクについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
ハイパーリンクについて詳しく説明していくね！
お願いします！
ハイパーリンクとは
HTML文書から他のHTML文書にページ遷移（移動）ができます。さらに、互いにリンクを設定してから、相互に移動できることから、「ハイパーリンク」と呼ばれていました。厳密にはブラウザによるHTML文書の「参照」ですが、Webの黎明期に、この機能が注目されて、話題になりました。
なお、リンクを設定しても、ページのURLが存在していなければ、それを表現している「404エラーページ」が表示されることになります。現在は、「ハイパーリンク」と呼ぶよりは、「リンク」がその意味を含んでいる場合が多いです。
ハイパーリンクする方法（aタグについて）
aタグは、Anker（アンカー）の略語です。
html
<a href="https://techacademy.jp/">テックアカデミー</a>
aタグのhref属性にURLを記述することにて、リンクを設定できます。実際に、画面に表示されている上記の文字をクリックしますと、テックアカデミーのトップページにページ遷移（移動）します。これは、ブラウザが、HTML文書内部のaタグに記述されているURLを自動的にWebページのアドレスとして識別してから、接続を実施する仕組みになっています。
また、HTML文書への移動だけができることではありません。他のソフトウェアを起動させることも可能になっています。例えば、専用のプロトコルとメールアドレスを記述してから、ユーザーが標準的に使用しているメールソフトを起動することもできます。以下に、そのサンプルコードを提示します。
html
<a href="mailto:sample@sample.com">試験メール</a>
※この手法ついて、メールアドレスを不正利用されて、迷惑メールが届く可能性を否めませんので、推奨はしません。
ハイパーリンクしてみよう
下記にサンプルコードを用意しました。まずは、href属性のダブルクォーテーションにて包まれた内側にURLを定義してから、次に、「文字」の部分をサイトのタイトルなどに変更してみてください。
html
<a href="">文字</a>
<a href="https://techacademy.jp/first-programming-bootcamp">はじめてのプログラミングコース</a>
監修してくれたメンター
| 井内洋平
TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
