HTMLの初心者向けにリンクの貼り方・aタグの利用方 について解説します。
<!-- aタグの構文ルール --> <a href="リンク先のURL">リンクのテキスト</a>
HTMLでは、aタグを利用するだけで指定したURLへのリンクを貼ることができます。画像にURLを埋め込んだり、別ウィンドウでURLを開く設定にしたり様々なオプションをHTMLで指定することもできます。
Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。
HTML：aタグの使い方
<!-- aタグの構文ルール --> <a href="リンク先のURL">リンクのテキスト</a>
例えば、当ブログにリンクする場合は以下のように記述します。
<a href="https://it-biz.online/">ビズドットオンライン</a>
実際の例→ ビズドットオンライン
<a>タグの使い方のポイントは以下の通りです。
タグの囲み方についてはHTMLの基本構文ルールにしたがって記述すればOK。aタグの属性「href」に対象のURLを書き込めばリンクの設定が完了します。
タグの「属性」という単語にピンと来なかった方は以下の記事をご覧下さい。
「href」属性の読み方・意味
余談レベルの解説ですが、「href」は "エイチレフ" と読みます。
Referenceとは、「参照」という意味なので、"href" はURLを参照するハイパーテキストという意味になります。
aタグのオプション
上記でaタグの基本は以上。ここからはaタグを利用したより実践的なリンクの貼り方を解説します。
同じリンクでも、同じウィンドウで開いたり、別のウィンドウで開いたり指定することが可能です。
この章では、リンクの開き方を指定する方法について解説します。
aタグ：tagert="_self"（同じウィンドウで開く）
<a href="https://it-biz.online/" target="_self">ビズドットオンライン</a>
具体例→ ビズドットオンライン
上記のリンクをクリックすると、今開いているウインドウ（またはタブ）でリンク先のページが開きます。
なお、target="self" はデフォルトです。そのため、target属性を指定しない場合も「target="self"」を指定した場合と同じ挙動（＝同じウインドウで開く）になります。
<!-- どちらも同じウインドウで開く --> <a href="https://it-biz.online/" target="_self">ビズドットオンライン</a> <a href="https://it-biz.online/">ビズドットオンライン</a>
aタグ：tagert="_blank"（新しいウィンドウで開く）
リンク先のページを新しいウィンドウで開く場合は target属性に "blank" を指定します。
<a href="https://it-biz.online/" target="_blank">ビズドットオンライン</a>
具体例→ ビズドットオンライン
別ウィンドウで開くことでユーザはリンク元のページに帰ってくることが容易となります。シーンに応じて適切に使い分けることが重要です。
aタグ：title属性（ツールチップの表示）
title属性は、ユーザーがリンク上にカーソルを合わせたときにポップアップ表示され、追加情報を表示することができます。
<a href="https://it-biz.online/" title="ビズドットオンラインのトップページだよ">ビズドットオンライン</a>
上記のコードを実際にブラウザ表示させた結果がこちら。
具体例→ ビズドットオンライン
リンク先のWebページのタイトルや、リンクがリンク元ページから開く新しいウィンドウのためのポップアップ広告であることを示す場合などに使用するのが一般的です。
Webエンジニアになりたい方は→完全無料のHTMLロードマップ
Webエンジニアを目指す方にとって避けては通れないベースとなる超・重要知識の１つがHTMLです。
以下のページでは、そもそもHTMLって何？何のために学習するの？という疑問に回答しつつ、HTMLを学習するためのロードマップ（全20記事）を整理しています
以下のページの内容をマスターすればHTMLの基本はOK。Webエンジニアを目指す方に、完全無料でかつ短時間で理解できるようにまとめましたので是非ご覧ください。
