aタグ<a>とは?
aタグ(アンカータグ)は、リンクの場所を指定する時に使われ、属性と組み合わせて使います。
基本情報
要素 | インライン |
主な属性 | href / target |
href
href(エイチレフ)は、Hypertext REFerenceの略で、リンク先のURLを指定するための属性です。
記述方法
<a href="https://mogumogu-design.com/">hrefのテストだよ</a>
See the Pen
aタグ確認用 by noma (@NomaH)
on CodePen.
この場合、もぐでざのトップページに移動します。
title
リンク先の説明をする時に使用しますが、ツールチップが表示されてしまうので、閲覧者には疎ましく感じてしまうことも…。
See the Pen
JjPMjPQ by noma (@noma)
on CodePen.
PCの方は、「テスト」のリンクにカーソルを合わせてみてください。ツールチップが表示されます。
target=”_blank”
target=”_blank”を指定すると、別タブで開きます。
外部リンク(自分のサイト以外のリンク)へ移動する時によく使われます。
「_blank」の他に「_self(同一窓で開く/デフォルト)」「_top(トップフレーム)」「_parent(親フレーム)」がありますが、ほとんど使われません。
html5の変更点
ブロック要素を含められるように
新しくブロック要素を含むことができるようになりました。
例えば、こんなリンクがあったとします。
これまで
<article>
<div class="post-thumbnail">
<a href="/why-design-comprehensive/"><img src="img/animaldesign.jpg"></a>
</div>
<h2 class="title"><a href="/why-design-comprehensive/">【かんたん】デザインカンプとは?どうして必要なの?わかりやすく図解します!<a href="/why-design-comprehensive/"></h2>
</article>
ブロック要素を囲んではいけないルールだったので、個別にリンクをつける必要がありました。
あたらしい方法
<a href="/why-design-comprehensive/">
<article>
<div class="post-thumbnail">
<img src="img/animaldesign.jpg">
</div>
<h2 class="title">【かんたん】デザインカンプとは?どうして必要なの?わかりやすく図解します!</h2>
</article>
</a>
ブログカードなどでブロック要素を囲むことができるようになり、コーディングの手間が減りました。
※分かりやすくするため、一部省略して表記しています。
download属性
新しくdownload属性が追加されました。
download属性が指定されたa要素は、たとえばzipやpdfなどをダウンロードするためのリンクという意味を持ちます。
この指定をすることで、ファイルの名前を指定することができるようになりました。
コード例1
<a href="neko.pdf" download> ねこのpdfをダウンロードするよ</a>
neko.pdfとしてダウンロードされます。
コード例2
<a href="neko.pdf" download="nekodayo.pdf"> ねこのpdfをダウンロードするよ</a>
nekodayo.pdfとしてダウンロードされます。