基礎9. a要素-リンクを設定する
a要素
a要素（anchor）は、ページを移動するハイパーリンクの設定ができます。
テキストや画像をクリックするとページが切り替わるのがハイパーリンクです。
インラインの要素ですが、他のインラインの要素と異なる特徴があります。
後述する「aタグの入れ子と注意点」を確認してください。
a要素自身は、特に意味付けはありませんが、aタグ内のテキストは、リンク先のページと関連付けられ、必ずリンク先の内容に合ったテキストであることが重要です。
検索サイトは、リンク元と先で相互に関連した内容であることを重要視するからです。
画像をaタグで囲んだ場合は、img要素のalt属性（代替テキスト）で代用することができます。
下記は、トップページへリンク指定したサンプルです。
<!-- テキストリンクの場合 -->
<p>
<a href="index.html">トップページ</a>
</p>
<!-- 画像リンクの場合 -->
<p>
<a href="index.html">
<img src="img/btn.jpg" alt="トップページ">
</a>
</p>
href属性
リンク先を指定する属性です。値は相対パスまたは絶対パスでリンク先を指定します。相対パスと絶対パスは11章で詳しく解説します。
主に相対パスは、自身のサイトのリンクに、絶対パスは、外部リンクで指定します。
ページ内リンク
href属性の値に、ID名を指定することで、ページ内の特定の場所に移動するリンクを設定できます。
指定は下記のようになります。
<!-- 移動先のタグにID名を指定 -->
<p id="anchor1">anchor1</p>
<!-- href属性の値にID名を指定 -->
<p><a href="#anchor1">anchor1へ移動</a></p>
別ページの場合は、下記のように「ページ名#ID」で指定します。
<!-- 移動先であるother.html内でidを指定 -->
<p id="anchor1">anchor2</p>
<!-- トップページからother.htmlの#anchor2へ移動 -->
<p><a href="other.html#anchor1">anchor2へ移動</a></p>
target属性
クリック時に別タブ（別ウインドウ）で表示する設定です。値は「_blank」で指定します。
外部サイトのリンクに使用します。
_blankを指定する場合、セキュリティ問題とパフォーマンス低下を回避するため、rel="noopener noreferrer"も併せて指定します。
noopenerとnoreferrerに関しては、下記サイトで詳しく解説がありますので、興味をある方はご覧ください。
下記は、別タブで、Googleを表示します。
<p>
<a href="https://www.google.co.jp/" target="_blank" rel="noopener noreferrer">Google</a>
</p>
download属性
クリック時に、PDFなどの書類をダウンロードさせる指定です。
target="_blank"の指定がないと、ダウンロードされないので注意してください。
また、ダウンロード可能なのは、同じドメイン内のファイルのみです。ドメインが異なるサイトのファイルは、ダウンロード指定ができません。
download属性に対応していないブラウザは、ダウンロードは行われず、ページ表示になります。
download属性の値は省略可能で、下記の場合、sample.pdfがダウンロードされます。
<p>
<a href="pdf/sample.pdf" target="_blank" rel="noopener noreferrer" download>サンプルPDF</a>
</p>
download属性の値を指定した場合、ダウンロードするファイル名の変更が可能です。
下記の場合、sample.pdfではなく、sample-data.pdfというファイル名でダウンロードが行われます。
<p>
<a href="pdf/sample.pdf" target="_blank" rel="noopener noreferrer" download="sample-data.pdf">サンプルPDF</a>
</p>
aタグの入れ子と注意点
aタグ内の入れ子は、以前のHTMLのバージョンでは、テキストまたはインラインの要素しか、入れ子にできませんでした。
ですが、HTML5以降は、bodyタグ内で使用できる、すべてのタグが入れ子にできるようになりました。
ただし、aタグの子要素にブロックレベルの要素を含めると、レイアウトが崩れます。
その場合は、aタグにdisplay: block;を指定しておきます。
<a href="other.html" class="block">
<h2>見出し2</h2>
<p>ブロックの説明文</p>
</a>
.block{ display: block; }
扱いが難しいと感じた場合は、従来通り、aタグの入れ子には、テキストまたはインラインの要素を使うのがよいでしょう。
まとめ
- a要素は、ページをリンクできる
- aタグで囲む内容は、リンク先と関連したテキストにする
- aタグの入れ子が画像（img要素）の場合は、alt属性にテキストを指定する
- target属性は、外部リンクを別タブで表示させる指定
- target属性を指定する場合、rel="noopener noreferrer"もあわせて指定する
- download属性を指定すると、ファイルをダウンロードさせることができる