<a>タグとは
<a>タグは、<a>と</a>で囲んだ文字にリンクを貼り付けるタグです。ここから飛べます、みたいな感じで外部サイトに繋げたり、この内容はここに書いてます、みたいに同じページ内で該当箇所に飛ばしたりすることができます。
<a>タグの属性
| href | ハイパーリンクのアドレス。リンクしたい先のURLを書いたり、設定したidのもとに飛ばす際に使用。書式はhref=”#id名” |
| target | リンクした先のURLを別のタブで開く |
| download | ダウンロードコンテンツをつくる。ここで指定するのはダウンロードしたときのファイル名。自分のドメインのもとにある素材のみダウンロード可能↓ クリックでダウンロード |
| ping | リンクをクリックしたときにpingを送る 対象のコンピュータがネットにつながっているか確認するコマンド |
| rel | 詳しいことは<link>タグの記事に書いています。 |
| hreflang | リンク先のページがなんの言語を使ってあるか指定する。同じコンテンツを複数の言語で作ったりしていなければ特に指定する必要はなし。 hreflang=”ja”とか。 |
| type | MIMEタイプを指定。こちらで少し解説してます |
| referrerpolicy | こちらで少し解説してます |
<a>タグの書き方
<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>タグでリンク先を指定してあげることでページ内リンクが簡単にできます。