href・target・relやdownloadにnameなど
Aタグにつける属性で実際によく使われる属性を解説

HTMLタグの中でも基本中の基本と言いますか、最もよく使われるであろうタグの1つとも言えるであろう「Aタグ」は、実際に使う際には様々な属性を合わせて使うことになります。

最も使われているであろうtarget属性や、アンカーリンクなどによく使われるname属性など、さらにはSEO的な観点からも大切な要素になってくるrel属性など、実はAタグには様々な属性が用意されていたりします。

メジャーでよく使われるものからほとんど使われない（実際に実務で自分も使ったことがない）属性まで様々ですが、今回は実際の実務的なところに即したよく使われる属性についてまとめていますので、Aタグを使う際に参考にしてもらえればと思います。

当たり前に使っているhref属性

もはやAタグを使っている人に説明は不要であろうと思いますが、hrefも属性の1つでありこれはリンク先を指定するものになります。

<a href="https://urakata.me/">裏方ワークス</a>

この属性を使う事で、いわゆるリンクとして使う事ができます。

よく使われるtarget属性

おそらくAタグの中の属性で最も使われているであろう属性がこの「target」属性ではないかと思います。targetを使用することで、リンク先を表示させる方法を指定する事ができます。

• _blank
• _self
• _parent
• _top

などの属性が用意されています。
しかしながら、ほとんどのケースで使うのが_blankになり、この属性を使うことでリンクを新しいタブ・ウィンドウで開くことができるようになります。

他の属性はあまり使う機会は多くなく、フレームを使ったりした際にそのフレームに表示するか親に表示するかなどのような時に使う事になります。

<a href="https://urakata.me/" target="_blank">裏方ワークス</a>

target=”_blank”のセキュリティ懸念について

数年前頃に、このtarget="_blank"はセキュリティに懸念点があるということで、rel="noopener"を合わせて付けるようにという事が言われていました。

<a href="https://urakata.me/blog/" target="_blank" rel="noopener">裏方ワークスブログ</a>

しかしながら今のブラウザ事情ではあまり気にする必要はないと言われています。

というのも、このセキュリティ懸念が出た当時はそうだったかもしれませんが、今のブラウザではtarget="_blank”が指定されていれば、自動的にrel="noopener"も合わせて処理してくれるようになっているためです。

また、WordPressの仕様でも今の新しいバージョンでは、target="_blank"を付けた場合に自動的にWordPress側がrel="noopener"を付与してくれています。

そのため多くのサイトにおいて今ではわざわざrel="noopener"を付ける必要性は無いとも言えます。しかしながら、全員がその事を知識として知っているわけでもないかもしれないため、こういった背景なども理解しておくと、クライアントから質問を受けた際に答えやすくなるのでは無いかと思います。

リンク先との関係を示すrel属性

先ほどにも少し解説しましたが、Aタグの属性の1つに「rel」属性があります。
この属性はリンク先との関係を示すものになります。

rel属性は様々な設定があるため、よく使われるものだけまとめておきます。

rel=”nofollow”

SEO的なところから一躍有名になった属性かもしれません。
簡単に言えば、このリンク先のページを推薦しているものではないという事を表しています。

この属性を入れる事で、検索エンジンにこのリンクを辿らないと伝える事ができます。

<a href="https://www.google.co.jp/" rel="nofollow">Google</a>

rel=”noopener”

先ほど解説したものになりますが、これを指定するとリンクを新しいコンテキストで開き、リンク元へアクセス不可とすることをブラウザに伝えます。主にtarget="_blank"と一緒に使う事になります。

ただ先述の通り、今のブラウザではtarget="_blank"を設定しているリンクは自動的にブラウザ側でrel="noopener"として処理してくれる仕様になっているため、入れる必要性は低くなっています。

ただ少ないとはいえ旧ブラウザで閲覧された時の事を考えて入れるという方もいますし、GA4などを見てサイトの状況に応じて検討すれば良いかとは思います。

<a href="https://www.google.co.jp/" target="_blank" rel="noopener">Google</a>

rel=”next”、rel=”prev”

そこまで頻繁に使うものではないかもしれませんが、WordPressのテーマなどによく入っていることもあるため知られている属性ではないかと思います。

そのページが一連のリソースとなっていて、次、前のページがあるときにそれを指示するために使われます。ブログなどで次の記事、前の記事などでよく使われています。

<a href="https://sample.com/prev.html" rel="prev">前のページ</a>
<a href="https://sample.com/next.html" rel="next">次のページ</a>

rel=”alternate”

該当のページに代替するページがある時に示します。

<a href="https://www.sample.com/en/" hreflang="en" rel="alternate">英語版</a>
<a href="https://www.sample.com/ja/" hreflang="ja" rel="alternate">日本語版</a>

実際にこのrel属性を使うシーンで言えば、Aタグよりもlinkタグの属性で使う事が多いかと思います。よく使う例としては、サイト制作をレスポンシブデザインで作らずに、PCはPC用URL、スマホはスマホ用URLを割り当てて作られる場合に、それぞれ代替のページを示すために使われます。

<link rel="alternate" media="only screen and (max-width: 640px)" href="https://www.sample.com/sp/">

他にもAタグの属性ではなくlinkタグでのrel属性として、別の言語を示したりする場合に使う事もできます。

rel=”ugc”

この属性はユーザによって作られたコンテンツ、いわゆるUGC(User Generated Content)であるという事を示します。現在まだ正式なタグとして用意されたものではないのですが、Googleが採用していることからSEOなどを考慮して多くのサイトで使われています。

コメントなどに使われるリンクにこのrel="ugc"が使われたりしますし、PRなどのプレスリリース系サイトなどサイト管理者が作るコンテンツでないところのリンクに多く使われています。

<a href="https://www.sample.com" rel="ugc">サンプルサイト</a>

その他のrel属性など

あまりrel属性で他に使うものというのは無いかもしれませんが、属性としては非常に多く用意されています。rel属性はAタグで使う事もあるのですが、上のrel="alternate"のように、どちらかというとlinkタグで使うrel属性の方が機会は多いものもあります。

• rel=”author”
• rel=”bookmark”
• rel=”external”
• rel=”help”
• rel=”license”
• rel=”noreferrer”
• rel=”search”
• rel=”tag”

などがあります。
あまり使う機会もないですが、一部はWordPressなどでデフォルト的に使われていたりもするものはありますが、自分も使わない事が多いので気になる方はより詳細を調べてみましょう。

リンク先がファイルである事を示すdownload属性

一般的にはリンク先にはURLを示す事が多いですが、PDFなどファイルを指定する機会もあり、そういった際にはこのdownload属性を示します。

指定する場合は、ダウンロードした際のファイル名を指定します。

<a href="sample.pdf" download="サンプル">PDFファイル</a>

このdownload属性は、当サイトのブログ内でも別途取り上げて解説していますので、詳細はそちらをご確認ください。

アンカーリンクで使っていたname属性は非推奨

サイト内のアンカーリンクの指定として使えるのがname属性でしたが、実はHTML5からは非推奨となってしまい、name属性ではなくID属性を使いましょうという事が謳われています。

そのため、今のサイト制作環境ではname属性はあまり使う機会はなくなり、アンカー指定をする際にはname属性ではなくid属性を使うのが望ましいですし、もし今もname属性を使っているのであれば、早めにid属性に切り替えていきましょう。

その他のAタグの属性について

これら以外にも、Aタグには属性が用意されています。
しかしながら、実際にそれらをよく使うかというとあまり使う機会はないというのが実情です。

ただ特殊なケースなどによっては目にする機会や使う機会などもあるかもしれないため、そういう属性があるということは知っておいたり、調べられるようにしておくと良いかもしれません。

• charset
• hreflang
• type
• rev
• shape
• coords

などがあります。
あまり今はそこまで使う機会も減りましたが、shapeやcoordsの属性はイメージマップ、クリッカブルマップを使う際には使われる属性でもあります。

まとめ

コーディングする際に皆が当たり前に使っているAタグですが、実はよくよく改めて見れば様々な属性が用意されていたりします。

セット的に当たり前に使っているhref属性やtarget属性などをはじめ、それら以外にもSEO的な観点からは外す事のできないrel属性など、知っておくべき・おさえておくべき属性も様々です。

特に途中から引き継いだり、共同で作っていったりする際やいつもと違ったサイト制作などの場合はあまり見かけない属性なども出てくる機会もあるかもしれません。

おさらいの意味も含めた基本的な属性からそんな属性もあったなというところまで、実務でよく使うところをまとめていますので、ぜひ改めての復習としておさらいをしていただければと思います。