HTML・CSS：外部・内部リンクを貼るタグ、a要素

<a>タグとは

<a>タグは、<a>と</a>で囲んだ文字にリンクを貼り付けるタグです。ここから飛べます、みたいな感じで外部サイトに繋げたり、この内容はここに書いてます、みたいに同じページ内で該当箇所に飛ばしたりすることができます。

href	ハイパーリンクのアドレス。リンクしたい先のURLを書いたり、設定したidのもとに飛ばす際に使用。書式はhref=”#id名”
target	リンクした先のURLを別のタブで開く
download	ダウンロードコンテンツをつくる。ここで指定するのはダウンロードしたときのファイル名。自分のドメインのもとにある素材のみダウンロード可能↓ クリックでダウンロード
ping	リンクをクリックしたときにpingを送る対象のコンピュータがネットにつながっているか確認するコマンド
rel	詳しいことは<link>タグの記事に書いています。
hreflang	リンク先のページがなんの言語を使ってあるか指定する。同じコンテンツを複数の言語で作ったりしていなければ特に指定する必要はなし。 hreflang=”ja”とか。
type	MIMEタイプを指定。こちらで少し解説してます
referrerpolicy	こちらで少し解説してます

<a href="パスもしくは外部リンク先のURL">ここにリンクさせたい文字</a>

リンク先の情報はhref=””と書かれている、””の中に書くことになります。こんな感じで↓
<a href=”ここに２つの方法のうち１つを使ってリンク先の情報を書きますよ”>

パスとは、以前このページにまとめておいた相対パスのことです。詳しい内容が気になる方はこちらの記事からどうぞ。

<a href="フォルダ名/ファイル名.html">ここにリンクさせたい文字</a>

このような感じで記載しましょう。

外部リンクを貼る場合は、URLをそのままコピペすることになります。このURLをそのままダイレクトに書く方法を絶対パスとも言いますが、それはどうでもいいとして（どうでもいいんかい）。書き方はこうです。

<a href="ここにURLをダイレクトアタック">ここにリンクさせたい文字</a>

href=””の、””の中に貼り付けたいリンク先のURLをそのままダイレクトに貼ってみましょう。例えばいちもんじのサイトならこんな感じになります↓

<a href="http://111111monji.com/">いちもんじのHPに飛ぶよ～！</a>

今まで見ていたページは消したくない。だからこれから開くリンクはどうしても新しいタブで開いてほしい～！ってことはありませんか？そんな時にこの機能を使いましょう。（ちなみにいちもんじは、気が付くとタブが20個くらい開いてることあってどれがどのタブか分からなくなりがちです。）

え？そもそもタブって何だよって？インターネットをして、なおかつこのページを見ているあなたならお分かりかと思いますが、これのことですね。

ちなみにこの「新しいタブ」の左側に表示されているFirefoxのアイコンですが、このことをファビコンと言い、これもタグで設定することが出来ます。詳しいことはこちらに書いていますので気になる方はどうぞ。↓

リンク先の画面を別のタブで開かせたいときには、<a>タグにtarget属性を付けましょう。

<a href="http://111111monji.com/" target="_blank">いちもんじのHPに飛ぶよ～！</a>

これだけ書いておけば、別のタブで開きたい画面を開かせることができます。

たとえば目次とかもそうですが、この項目は読む必要ないから、この項目から読みたいな～ってことありますよね。その場合にはid属性を使いましょう。id属性についてはこちらの記事でまとめています。↓

というわけで、飛ばしたい項目にid属性を付加してあげましょう。飛ばしたい場所のidを<a>タグ内のhref=””の中で指定してあげることで可能になります。
自分でつけたidの前に#を付けましょう。実際のコードはこんな感じで。（この場合見出し１に飛ばしたい。）

<a href="#midasi1">ここをクリックすると見出し１に飛びますよ</a>
…
<h1 id="midasi1">見出し１ですよ</h1>

このようにして自分で飛ばし先のidを定義して、<a>タグでリンク先を指定してあげることでページ内リンクが簡単にできます。