<a ></a>(アンカータグ)について解説!html5との違いは?

<a ></a>(アンカータグ)について解説!html5との違いは?

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としてダウンロードされます。

スポンサーリンク

おすすめ本の紹介

直感的にデザインが分かっちゃうスバラシな本です

余白の大事さがギュッとこの一冊で分かっちゃう

WP中級者向け。テーマ作成で役立ちます。

関連記事