前回記事(情報を整理するテーブル系タグの使い方)までで、基本的なWebページの骨組みを作ることができました。本記事では、ハイパーリンクを設定し、ページ間やページ内の遷移などを行う方法を解説します。ハイパーリンクを設定するにはaタグを使用します。aタグは開始タグの中に属性という性質や動作を細かく設定する追加情報を設定します。

• href属性

　aタグで使用する最も基本的な属性はhref属性です。VSCodeでaを入力してEnterキーを押すとhref属性に""が設定されたaの開始タグと終了タグを入力できます(Emmet)。

　このaタグ内のhref属性に遷移させたいページのURLを入力し、開始タグと終了タグの間にハイパーリンクにしたい文字列を入力することでクリックすることでそのページに遷移できます。例として遷移先をGoogleのURLに、テキストをGoogleに設定します。aタグを使用しない場合はただの黒い文字ですが、aタグを適応させるとクリックしていない場合はデフォルト青文字に下線が引かれた状態になります。テキストをクリックすると同じタブで設定したURLに遷移します。さらに一度遷移した場所はデフォルトで紫色字に変化します。リンク先が決まらない場合などはhref属性に""ではなく、"#"と設定します。""の場合はページをリロードし、"#"の場合はリロードせずにページの最上部へ戻ります。

　href属性にURLを設定することで画面遷移しますが、ファイルパスを設定することで指定したファイルを表示またはダウンロードすることができます。画面表示できるファイル形式の場合は表示し、できない場合はダウンロードします。デフォルトでは現在と同じタブで表示またはダウンロードします。

• target属性

　aタグのデフォルトの動作は現在のタブで指定したページに遷移またはファイル表示します。現在のタブか別タブで遷移、表示するかを指定する属性がtarget属性です。target属性を指定しなかった場合は

target="_self"(現在のタブで遷移)の動作になりますが、target="_blank"に設定すると別タブで開くことができます。別タブで表示した場合はブラウザの戻るを押すことができません。

　target属性の使い分けとしては戻るを押せなくてもよい場合(外部サイトへの遷移やファイル表示)はtarget="_blank"に指定します。自身のサイト内で遷移したい場合はtarget属性を明示的に設定せずに同じタブで遷移できるようにします。

• downroad属性

　ファイルを強制的にダウンロードさせたい場合はdownload属性を使用します。downroad属性に値を設定するとダウンロード時にその値で名前を付けてダウンロードすることができます。

• href属性のその他の使い方

　href属性に値を設定する際にtel:電話番号を指定すると通話することができ、mailto:メールアドレスを指定するとメールを作成できます。

<関連記事>

• 前回の記事　情報を整理するテーブル系タグの使い方