リンクを使いこなす

導入

第1章で <a> の基本を学びました。ここでは「新しいタブで開く」「ページ内の場所へ飛ぶ」といった応用を扱います。

説明

• target="_blank" … リンクを新しいタブで開く
• href="#id名" … 同じページ内の、その id を持つ要素へ飛ぶ

<a href="https://example.com" target="_blank">別タブで開く</a>

<a href="#section2">下のセクションへ</a>
<h2 id="section2">セクション2</h2>

# から始まる href は ページ内リンク（アンカー）で、飛び先の要素に付けた id と対応させます。

やってみよう

上の例を打ち込み、上のリンクが新しいタブで開くこと、下のリンクで同じページ内を移動することを確かめましょう。

演習

https://example.com を 新しいタブ で開く「サイトを開く」というリンクを作ってください。