囲めばリンクになる<a>タグ

見出しの通り<a>タグはリンクをつけるためのタグです。リンクにしたい部分を囲んで使います。
<a>タグで囲まれた部分は、文字が青く表示され、アンダーラインがつきます。
<a>タグはインライン要素なのでブロックレベルの要素の中で使うようにしましょう。

※リンク以外では青文字やアンダーラインはなるべく避けるようにしましょう。

ただ<a>タグで囲んだだけでは移動させたいリンク先に移動させることができないので、属性を使って移動先のURLを設定します。

移動先のURLの設定をするhref属性

href属性には<a>タグで囲んだ部分をクリックしたときに移動させたい場所のパスを記述します。
同じサイト内のディレクトリに移動先のページがあれば相対パスで大丈夫ですが、外部サイトの場合は絶対パスを使って記述します。
また、#○○のように「ID」をhref属性に設定することができ、同一ページ内で指定したIDが付いた要素まで移動してくれたりもします。
「#」だけに設定するとどこのページにも移動しないようにできたりもします。

別タブで移動先を表示するときに使うtarget属性

同一サイト内での移動であれば必要がないように思えますが、外部サイトに移動した場合この設定をしておくと個人的にとても便利に思えます。 例えば開いたサイトの情報があまり自分の欲しい情報ではなかった場合、大体の人はタブを閉じようとすると思います。

これが自分のサイトを閲覧していたタブであった場合自分のサイトからもユーザーが離れてしまいますよね。 これを防ぐためにも、外部サイトへのリンクをつけた場合はtarget属性をつけておくと、自分のサイトからユーザー逃がしにくくなるといえます。

ただ別タブで開かれることが好きではないユーザーもいるので、うまいこと使い分けていきましょう。

「a」はanchorの略でHTMLといえばリンク機能というぐらい重要なタグです。