mosya

リンクタグをマスターしよう

初心者のためのHTML入門6 / 9

このレッスンでは、クリックすると別のページや特定の場所に移動できる、aタグについて学んでいきます。
よく使われるタグなので、ぜひ使い方をマスターしましょう！

aタグとは？

aタグとは、HTMLでリンクを作るために使います。

aタグの「a」は、anchor（アンカー）の略だよ！
anchorは、船のイカリ（⚓️）を意味するらしいよ。

基本的な書き方

リンクさせたい箇所をa タグで挟み、 href（エイチレフ）属性を用いてリンク先のURLを指定します。

<a href="リンク先のURL">アンカーテキスト</a>

aタグで挟まれた文字をアンカーテキストと呼ぶよ。

アンカーテキストに書かれた文字の部分は通常、文字色が変わり、下に線が引かれた見た目になります。

別タブで開く

リンク先を新しいウインドウまたはタブで表示したい場合は、a要素に、target="_blank"を指定します。

<a href="https://mosya.dev/" target="_blank">
  mosya | Web制作を一から学ぶ
</a>
別タブで開く時のセキュリティについて

target="_blank"を指定するときは、下にあるコードのようにrel（レル）属性にnoopener（ノーオープナー）を指定することが一般的です。
これにより移動先のページから元のページを不正なコードによって操作されることを防ぐことができます。
ただし、最近のブラウザーではこのnoopenerを指定していなくても通常、移動先のページから操作できないようになっています。

<a href="https://mosya.dev/" target="_blank" rel="noopener">mosya | Web制作を一から学ぶ</a>